Skip to content
TrustedSkillsbeta
Back to all skills

Ui Engineering

Checked
yzfly·v1.0.0·frontend·MIT

Expert system for creating high-quality, brand-aligned user interfaces. Use this skill when asked to design websites, create components, or implement specific visual styles. It contains specifications for major tech companies, design trends, and specific site types like blogs or presentations.

Repository

Install on your platform

Showing OpenClaw.

  1. 1

    Run this in your terminal

    terminal
    $ openclaw skills install ui-engineering

What we know about this skill

Publisher

yzfly

Taken from the source listing. We haven't verified who controls this account.

Install target

Pinned to e74d280a

Installs fetch a stored snapshot of that commit, so the code can't change after the fact.

No human has reviewed this code. The checks below are a static scan of the files at one commit — nobody has run this skill or judged whether it works. A skill runs with whatever access you give your agent, so read the source before you install it.

Automated safety checks

scanned

This skill passed all 6 checks. We read its files at one commit and looked for the things that make a skill dangerous to run — not for whether it works.

  • Declares what it does: passed

    SKILL.md parses and declares a name and a description.

    SKILL.md exists, its frontmatter parses, and it declares a name and a description.

  • No undeclared network calls: passed

    Makes no network calls.

    Every host the skill dials — from its scripts, its config endpoints or the commands it tells the agent to run — is either well-known package and API infrastructure or declared in its own frontmatter. Links in documentation are not counted.

  • No obfuscated payloads: passed

    No encoded or obfuscated payloads.

    No base64, hex or compressed blob is decoded and then executed, and no encoded shell commands.

  • No credential access: passed

    Reads no keys, tokens, keychains or credential files.

    Neither the code nor the SKILL.md instructions read SSH keys, cloud credentials, keychains, token stores, browser cookie databases or dotfiles that hold secrets.

  • No pipe-to-shell installers: passed

    No pipe-to-shell or download-and-run installers.

    No `curl … | sh` pattern, in the code or in the instructions, that runs code fetched at run time.

  • Pinned to a commit: passed

    Scanned yzfly/pro-ui-engineering-skill at e74d280ae9.

    The exact upstream commit SHA that was scanned is recorded, so the result refers to specific bytes.

Commit
e74d280ae9
Manifest
SKILL.md
Scanned
60 files, 3,786 lines
This is a static scan, not a review. It reads the skill's files; it does not run them, and it cannot tell you whether the skill is any good or whether the code does what its description says. A skill runs with whatever access you give your agent.
What each check looks for →

About this skill

What it does

The UI Engineering skill equips AI agents with detailed specifications from leading design systems like Stripe, Apple, and Linear. It goes beyond surface-level aesthetics by providing design tokens (color palettes, typography), component recipes (Tailwind/CSS implementations), and motion physics to create high-quality, engineering-grade user interfaces. The skill also imparts "mental models" – understanding the reasoning behind successful designs.

When to use it

  • Creating a Fintech SaaS dashboard: Leverage the Stripe specification for an invisible precision feel.
  • Designing a personal blog layout: Utilize the Personal Blog spec to prioritize typography and digital garden aesthetics.
  • Developing a product landing page: Employ the Presentation Scroll spec to mimic the flow of a PowerPoint deck.
  • Building consistent UI components: Apply design tokens from Apple or Vercel for brand alignment.

Key capabilities

  • 60+ Design Systems: Includes specifications for Stripe, Apple, Linear, Notion, Vercel, and more.
  • Design Tokens: Provides exact color palettes, typography scales, and shadows.
  • Component Recipes: Offers copy-paste ready Tailwind/CSS implementation patterns.
  • Motion Physics: Defines transition curves, spring settings, and interaction models.
  • Mental Models: Explains the design rationale behind popular styles (e.g., "Apple is Premium Glass").

Example prompts

  • "Design a settings page using the Stripe spec. I want that invisible precision feel."
  • "Build a blog post layout using the Personal Blog spec. Focus on typography and digital garden aesthetics."
  • "Create a product landing page using the Presentation Scroll spec. Make it feel like a PPT deck with snap scrolling."

Tips & gotchas

  • Installation Required: This skill requires cloning the repository and importing SKILL.md into your AI agent's configuration (Claude Desktop/MCP or Cursor).
  • Specificity is Key: The more specific you are about which design system to use, the better results you’ll achieve.