skills.rest
whinchman
whinchmanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

designer

Implements UI components, design tokens, and layouts following project design system rules.

Updated May 2, 2026
Search Tags:#accessibility#design system#css#figma#design tokens#ui design#component styling
One-click install
npx skills add https://github.com/whinchman/midi-man-mk3 --skill designer-whinchman
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: designer
Source: https://github.com/whinchman/midi-man-mk3/tree/main/.claude/skills/designer
Command: npx skills add https://github.com/whinchman/midi-man-mk3 --skill designer-whinchman

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? UI and design work in a multi-agent workflow often drifts from the project's established visual language, producing inconsistent colors, fonts, and components. This Skill enforces the design system defined in agent.yaml, audits existing patterns before creating new ones, and routes all changes through pull requests instead of direct merges. ## Core Features & Use Cases - Design Token Management: Creates or updates CSS custom properties and theme files following the project's naming conventions, with light/dark mode support. - Accessible Component Implementation: Writes semantic HTML with ARIA attributes, keyboard navigation, and WCAG-compliant responsive layouts. - Figma Integration: Reads design context and screenshots from Figma, maps Figma tokens to the project's token system, and maintains Code Connect mappings. - Use Case: A task file requests a new settings page. The agent reads the design section of agent.yaml, audits existing Tailwind config and components, plans the layout in a design doc, implements the page in a git worktree, and opens a pull request. ## Quick Start Ask the designer agent to pick up the pending designer task in .workflow/tasks/ and implement the new component following the project design system.

Frequently Asked Questions about designer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement UI components that follow an existing design system?▼

Read the design section of agent.yaml for the project's colors, fonts, mood, and constraints, then audit existing CSS, Tailwind config, and shared components before writing new code. Reuse established tokens and patterns rather than introducing new ones.

How to convert Figma designs to code in an existing project?▼

Use get_design_context and get_screenshot to read the Figma design, then adapt the output to the project's stack and component library. Map Figma design tokens to the project's token system and update .figma.js Code Connect mappings if configured.

What accessibility requirements should UI components meet?▼

Components should use semantic HTML elements, ARIA attributes like aria-label and aria-expanded, keyboard navigation with proper focus management, and color contrast meeting the WCAG level defined in the project configuration.

Can this agent push design changes directly to the main branch?▼

No. All changes must go through a pull request opened from a feature branch in a dedicated git worktree. The agent never pushes to remote or merges to the default branch directly.

What happens if the project has no defined design system?▼

The agent audits the existing codebase for an established visual language and follows it. If no patterns exist at all, it stops and asks for direction rather than inventing a design language.

Related Skills

Explore More Design & Creative Skills→
ihlamuryihlamury
73

posthog-ui-skills

Enforces Posthog's UI design system constraints for building dark mode interfaces.

Community
Intermediate
daddiadaddia
1

create-mr

Create a merge request for the current feature branch targeting the default branch.

Community
Intermediate
PanJasonPanJason
1

architect

Convert a PM Plan and repository context into a DESIGN.md document.

Community
Advanced
CatsofsufferingCatsofsuffering
5

bolder

Amplify visual impact of bland designs while preserving usability and accessibility.

Community
Intermediate