frontend-design-realization
CommunityTurn design mockups into a usable design system
Design & Creative#accessibility#design system#ui tokens#theme configuration#SDLC planning#frontend primitives#manifest authoring
Authorgleeb
Version1.0.0
Installs0
System Documentation
What problem does it solve?
It prevents design drift by translating planning-phase design artifacts into a consistent, tokenized design-system layer that feature implementers can follow without re-inventing styling.
Core Features & Use Cases
- Design-system bootstrap & refresh: creates the initial
docs/design-system/MANIFEST.mdwhen it’s missing, or updates tokens and primitives after plan/design changes via diffing in refresh mode. - Token + primitive contract: emits semantic design tokens (colors, typography, spacing, radius, shadow, motion) and implements required UI primitives with all mandated states and accessibility behavior.
- Primitives-first quality gate: enforces a web-design-guidelines accessibility pass and a verify gate before completion, blocking output when required inputs are missing.
Quick Start
Use the frontend-design-realization skill when plan/design/design-spec.md exists and docs/design-system/MANIFEST.md does not, to generate the missing design-system manifest plus the required tokens and UI primitives.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: frontend-design-realization Download link: https://github.com/gleeb/ai-registry/archive/main.zip#frontend-design-realization Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.