Agent Skills Hub

components-build

Build modern, composable, and accessible React UI components following the components.build specification. Use for design systems, component libraries, and reusable UI architectures.

pencil-ui-design

A professional workflow and component library for industrial-grade UI design using Pencil MCP, featuring standardized tokens for color, typography, spacing, and shadows.

figma-design-to-code

Convert Figma designs to project-consistent UI code using TemPad Dev MCP for precise markup, styling, and token integration.

agents-md-generator

Generate hierarchical, token-efficient AGENTS.md files for AI coding agents to provide repository-wide context and project-specific guidelines.

tailwind-config

Manage Tailwind CSS configuration, custom design tokens, themes, and design system utilities across the monorepo.

designer

Expert UI/UX design assistant for React & Next.js. Provides visual critiques, design system architecture, and Tailwind CSS/shadcn/ui implementation guidance for production-grade web applications.

ui-design-system

Professional UI design system toolkit for design token generation, component architecture, responsive calculations, and developer handoff documentation to ensure visual consistency.

elegant-design

Build professional, accessible, and responsive user interfaces using React, Next.js, and modern design systems like shadcn/ui. Focuses on developer tools, chat interfaces, and real-time streaming components.

design-review

Designer's eye QA: detects and automates fixes for visual inconsistencies, spacing, hierarchy, and UI polish issues. Iteratively verifies with before/after screenshots.

core-components

Core component library and design system patterns for consistent UI development using design tokens.

color-palette

Generate complete, accessible colour systems from a single hex. Includes 11-shade scales (50-950), semantic tokens, dark mode variants, and Tailwind v4 CSS output.

figma

Leverage the Figma MCP server to fetch design data, extract assets, and transform Figma nodes into production-ready React and Tailwind code with design system alignment.