← Back to Skills
🔧

Ui Engineering

🔓Unverified
by yzfly · v1.0.0 · MITRepository

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.

Install on your platform

We auto-selected Claude Code based on this skill’s supported platforms.

1

Run in terminal (recommended)

terminal
claude mcp add ui-engineering npx -- -y @trustedskills/ui-engineering
2

Or manually add to ~/.claude/settings.json

~/.claude/settings.json
{
  "mcpServers": {
    "ui-engineering": {
      "command": "npx",
      "args": [
        "-y",
        "@trustedskills/ui-engineering"
      ]
    }
  }
}

Requires Claude Code (claude CLI). Run claude --version to verify your install.

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.
View Repository →

Tags

🛡️

TrustedSkills Verification

Unlike other registries that point to live repositories, TrustedSkills pins every skill to a verified commit hash. This protects you from malicious updates — what you install today is exactly what was reviewed and verified.

Verified Commite74d280a →

Installing this skill downloads the exact code at commit e74d280a, not the current state of the repository. This prevents supply-chain attacks from unauthorized updates.

Security Audits

Gen Agent Trust HubPass
SocketPass
SnykPass

Details

Version
v1.0.0
License
MIT
Author
yzfly
Installs
0
Updated
Jan 11, 2026
Published
Jan 11, 2026
Repository (canonical source) →

🔓 Unverified

Not yet reviewed. Use with caution.

Pinned commite74d280a

Install command fetches the verified snapshot, not the live repository.