frontend-design cursor rules

joeseesun/qiaomu-design

Skill Claude CodeCodex

A design review and redesign guide that combines product reasoning, visual design references, interaction patterns, and engineering checks for user interfaces.

Ilm-Alan/frontend-design

Skill Claude CodeCodex

Build a frontend with a deliberate visual direction held through palette, typography, structure, and texture, with on-screen strings that name real information rather than fabricated demo data or filler labels. Use when building or restyling a frontend.

sanky369/vibe-building-skills

Skill Claude CodeCodex

Facilitates an interactive session that turns a product or subject into an original, internally consistent visual design language for any artifact — infographics, video storyboards, websites, or mobile app UI/UX. Use when the user wants an original design language, identity, or art direction, or when a design feels…

sanky369/vibe-building-skills

Skill Claude CodeCodex

Audit a frontend against WCAG and fix what fails: semantic HTML, keyboard navigation, focus management, screen-reader support (ARIA), color contrast, forms, and media alternatives. Use when the user asks 'is this accessible', 'make this WCAG/AA compliant', 'add keyboard navigation', 'fix screen reader support', 'a11y…

sanky369/vibe-building-skills

Skill Claude CodeCodex

Diagnose and fix how slow a frontend feels and measures: optimistic UI for mutations, latency masking (skeletons, blur-up, preloading, staggering), request batching/deduplication, and Core Web Vitals (LCP/INP/CLS) remediation. Use when the user says 'the app feels slow', 'clicks feel laggy', 'improve performance', 'my…

PyModel/designer-skill

Plugin Claude Code

Plug-and-play MCP that gives your agent UI superpowers. One install: design skill + MCP server, zero config.

PyModel/designer-skill

Command

Verify designer-skill MCP is installed and reachable.

PyModel/designer-skill

Command

Print designer-skill-mcp version and npm update status.

PyModel/designer-skill

Cursor rule

Enforce designer-skill MCP workflow before any UI/design work.

PyModel/designer-skill

Skill Claude CodeCodex

Plug-and-play MCP for UI superpowers. Use when building, designing, redesigning, refactoring, polishing, auditing, or enhancing any web or app user interface — landing pages, marketing sites, dashboards, product UI, components, forms, or design systems. Use when an interface looks generic or "AI-made", or needs better…

PyModel/designer-skill

Skill Claude CodeCodex

Wrap raster logos (webp, png, jpg) in self-contained SVG files via base64 embedding for pixel-perfect matches. Use when creating logo SVGs, converting webp/png to svg, fixing hand-drawn logos that do not match the source, or preparing plugin/README logo assets without a vector source file.

PyModel/designer-skill

Skill Claude CodeCodex

Release designer-skill-mcp to npm with a git tag and GitHub release. Use when the user asks to ship, publish, cut a release, bump version, push tags, or run npm publish for designer-skill-mcp.

b1rdmania/claude-brand-skills

Instructions file

Claude Code instructions for b1rdmania/claude-brand-skills, covering claude brand skills repository, repository structure, version: v2.0 (february 2026), completed project: infrasingularity and completed reference project.

b1rdmania/claude-brand-skills

Skill Claude CodeCodex

Complete brand development system with emotive foundation. Triggers on requests for brand identity, logos, visual systems, or design guidelines. Creates distinctive, anti-AI-slop design from strategy through delivery.

b1rdmania/claude-brand-skills

Skill Claude CodeCodex

Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.

b1rdmania/claude-brand-skills

Skill Claude CodeCodex

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

Surya17155/Replica

Skill Claude CodeCodex

Use when the user uploads a screenshot of a hero section or landing page (or a URL/description of one) and wants a copy-paste-ready developer prompt to recreate it exactly in a tool like Lovable, Bolt, Replit, or Cursor. Produces prompts with exact hex colors, Tailwind classes, animation timing tuples, and component…

adryanmoldokkr32-pixel/anthropics-skills

Plugin Claude Code

Plugin marketplace listing 3 plugins: document-skills, example-skills, claude-api.

adryanmoldokkr32-pixel/anthropics-skills

Skill Claude CodeCodex

Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright…

adryanmoldokkr32-pixel/anthropics-skills

Skill Claude CodeCodex

Build, debug, and optimize Claude API / Anthropic SDK apps. Apps built with this skill should include prompt caching. TRIGGER when: code imports anthropic/@anthropic-ai/sdk; user asks to use the Claude API, Anthropic SDKs, or Managed Agents (/v1/agents, /v1/sessions, /v1/environments). DO NOT TRIGGER when: code…

adryanmoldokkr32-pixel/anthropics-skills

Skill Claude CodeCodex

Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.

adryanmoldokkr32-pixel/anthropics-skills

Agent

Analyze blind comparison results to understand WHY the winner won and generate improvement suggestions.

adryanmoldokkr32-pixel/anthropics-skills

Agent

Compare two outputs WITHOUT knowing which skill produced them.

adryanmoldokkr32-pixel/anthropics-skills

Agent

Evaluate expectations against an execution transcript and outputs.