frontend-design skills

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

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

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

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.

saadjangda/shipwright

Skill Claude CodeCodex

The only skill you need to build and ship world-class software — from idea to production. Covers the COMPLETE lifecycle: architecture design, domain modeling, service boundaries, data architecture, implementation with TDD, distinctive frontend design (anti-AI-slop), exhaustive QA across all layers, security hardening…

amanmaqsood/design-with-ai

Skill Claude CodeCodex

Redesign and implement complete, polished websites in an existing or greenfield codebase. Use for an explicit website or codebase implementation request such as "make this site aesthetic," "design this better," "give this website a premium UI," or "polish and build this website"; use design-with-ai for advice…

amanmaqsood/design-with-ai

Skill Claude CodeCodex

Design, critique, or refine product interfaces as coherent systems. Use for UI/UX direction, product flows, interface reviews, design-to-code planning, or reducing generic and cluttered AI-generated UI; do not use for brand-only graphics.

lllkn/web-taste

Skill Claude CodeCodex

Learn, visualize, confirm, store, and apply reusable frontend visual taste from reference webpage URLs. Use when a user asks to study, learn, save, imitate, or apply a website's style, layout, UI, typography, components, art direction, motion, or responsive behavior; when prior taste cases should inform a frontend; or…

isdou/aoleme-ui-skill

Skill Claude CodeCodex

Generate dark neon cyber-fantasy dashboards, glassmorphism surfaces, and gamified React and Tailwind UIs.

Bandersnatch0x/design-playbook

Skill Claude CodeCodex

Route and orchestrate outcome-first product UI work. Use for answer, review, diagnosis, plan, prototype, build, or fix asks involving a page, dashboard, list, or settings surface, and for recirculating failed design review through declarations and evidence.

Bandersnatch0x/design-playbook

Skill Claude CodeCodex

Run evidence-backed UI acceptance. Use after generating a page, or when the user wants a design review or recirculatable critique against declared goals and success criteria.

Bandersnatch0x/design-playbook

Skill Claude CodeCodex

Declaration-first UI spec (six-layer spec.md) shaped through an S0-S6 interactive session. Use when turning a short product/UI ask into six-layer spec.md, or when goal, edge-state, acceptance, or evidence requirements are missing before build.