design-to-component-translator
Design-to-Component Translator
Convert design specifications into pixel-perfect, production-ready React components.
Core Workflow
- Analyze design specs: Extract spacing, colors, typography, dimensions
- Map to tokens: Convert design values to design system tokens
- Generate structure: Create semantic HTML structure
- Apply styles: Implement Tailwind/CSS with exact measurements
- Add states: Include hover, focus, active, disabled states
- Handle responsive: Implement breakpoint-specific rules
- Ensure accessibility: Add ARIA labels, keyboard navigation
- Document variants: List all visual states and props
Design Spec Analysis
Extract from Figma/Design
More from majiayu000/claude-skill-registry
sequential-thinking
Structured reflective problem-solving methodology. Process: decompose, analyze, hypothesize, verify, revise. Capabilities: complex problem decomposition, adaptive planning, course correction, hypothesis verification, multi-step analysis. Actions: decompose, analyze, plan, revise, verify solutions step-by-step. Keywords: sequential thinking, problem decomposition, multi-step analysis, hypothesis verification, adaptive planning, course correction, reflective thinking, step-by-step, thought sequence, dynamic adjustment, unclear scope, complex problem, structured analysis. Use when: decomposing complex problems, planning with revision capability, analyzing unclear scope, verifying hypotheses, needing course correction, solving multi-step problems.
7prompt-architect
Create and enhance prompts, system instructions, and principle files. Capabilities: transform verbose prompts, add patterns/heuristics, optimize token usage, structure CLAUDE.md principles, improve agent/persona definitions, apply prompt engineering techniques (CoT, few-shot, ReAct). Actions: create, enhance, optimize, refactor, compress prompts. Keywords: prompt engineering, system prompt, CLAUDE.md, principle files, instruction optimization, agent prompt, persona prompt, token efficiency, prompt structure, workflow prompts, rules, constraints, few-shot, chain-of-thought, soul, tensions, dialectic. Use when: creating new prompts, enhancing principle files, improving system instructions, optimizing CLAUDE.md, restructuring verbose prompts, adding patterns to workflows, defining agent behaviors.
72d-games
2D game development principles. Sprites, tilemaps, physics, camera.
7planning
Universal planning for technical and non-technical projects. Domains: software implementation, business, personal, creative, academic, events. Capabilities: feature planning, system architecture, goal setting, milestone planning, requirement breakdown, trade-off analysis, resource allocation, risk assessment. Actions: plan, architect, design, evaluate, breakdown, structure projects. Keywords: implementation plan, technical design, architecture, roadmap, project plan, strategy, goal setting, milestones, timeline, action plan, SMART goals, sprint planning, task breakdown, OKRs. Use when: planning features, designing architecture, creating roadmaps, setting goals, organizing projects, breaking down requirements.
7research
Technical research methodology with YAGNI/KISS/DRY principles. Phases: scope definition, information gathering, analysis, synthesis, recommendation. Capabilities: technology evaluation, architecture analysis, best practices research, trade-off assessment, solution design. Actions: research, analyze, evaluate, compare, recommend technical solutions. Keywords: research, technology evaluation, best practices, architecture analysis, trade-offs, scalability, security, maintainability, YAGNI, KISS, DRY, technical analysis, solution design, competitive analysis, feasibility study. Use when: researching technologies, evaluating architectures, analyzing best practices, comparing solutions, assessing technical trade-offs, planning scalable/secure systems.
6claude-ecosystem
Claude Code ecosystem expertise. Modules: CLI tool (setup, slash commands, MCP servers, hooks, plugins, CI/CD), extensibility (agents, skills, output styles creation), CLAUDE.md (project instructions, optimization). Actions: configure, troubleshoot, create, deploy, integrate, optimize Claude Code. Keywords: Claude Code, Anthropic, CLI tool, slash command, MCP server, Agent Skill, hook, plugin, CI/CD, enterprise, CLAUDE.md, agentic coding, agent, skill, output-style, SKILL.md, subagent, Task tool, project instructions, token optimization. Use when: learning Claude Code features, configuring settings, creating skills/agents/hooks, setting up MCP servers, troubleshooting issues, CI/CD integration, initializing or optimizing CLAUDE.md files.
5