/
frontend-design
Cursor Skill
This skill should be used when creating distinctive, production-grade frontend interfaces with high design quality. It applies when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
AI-powered development tools. 29 agents, 22 commands, 19 skills, 1 MCP server for code review, research, design, and workflow automation.
Skills19
agent-browserBrowser automation using Vercel's agent-browser CLI. Use when you need to interact with web pages, fill forms, take screenshots, or scrape data. Alternative to Playwright MCP - uses Bash commands with ref-based element selection. Triggers on "browse website", "fill form", "click button", "take screenshot", "scrape page", "web automation".
agent-native-architectureBuild applications where agents are first-class citizens. Use this skill when designing autonomous agents, creating MCP tools, implementing self-modifying systems, or building apps where features are outcomes achieved by agents operating in a loop.
andrew-kane-gem-writerThis skill should be used when writing Ruby gems following Andrew Kane's proven patterns and philosophy. It applies when creating new Ruby gems, refactoring existing gems, designing gem APIs, or when clean, minimal, production-ready Ruby library code is needed. Triggers on requests like "create a gem", "write a Ruby library", "design a gem API", or mentions of Andrew Kane's style.
brainstormingThis skill should be used before implementing features, building components, or making changes. It guides exploring user intent, approaches, and design decisions before planning. Triggers on "let's brainstorm", "help me think through", "what should we build", "explore approaches", ambiguous feature requests, or when the user's request has multiple valid interpretations that need clarification.
compound-docsCapture solved problems as categorized documentation with YAML frontmatter for fast lookup
Subagents29
design-implementation-reviewerVisually compares live UI implementation against Figma designs and provides detailed feedback on discrepancies. Use after writing or modifying HTML/CSS/React components to verify design fidelity.
design-iteratorIteratively refines UI design through N screenshot-analyze-improve cycles. Use PROACTIVELY when design changes aren't coming together after 1-2 attempts, or when user requests iterative refinement.
figma-design-syncDetects and fixes visual differences between a web implementation and its Figma design. Use iteratively when syncing implementation to match Figma specs.
ankane-readme-writerCreates or updates README files following Ankane-style template for Ruby gems. Use when writing gem documentation with imperative voice, concise prose, and standard section ordering.
best-practices-researcherResearches and synthesizes external best practices, documentation, and examples for any technology or framework. Use when you need industry standards, community conventions, or implementation guidance.
Commands22
agent-native-auditRun comprehensive agent-native architecture review with scored principles
changelogCreate engaging changelogs for recent merges to main branch
create-agent-skillCreate or edit Claude Code skills with expert guidance on structure and best practices
deepen-planEnhance a plan with parallel research agents for each section to add depth, best practices, and implementation details
deploy-docsValidate and prepare documentation for GitHub Pages deployment