Creative frontend design skill. Builds distinctive, production-grade interfaces with intentional aesthetics. Includes DFII scoring (go/no-go gate before coding), mandatory Design Thinking Phase (Purpose→Tone→Differentiation Anchor), Required Output Structure (Design Direction Summary, Design System Snapshot, Differentiation Callout), and Operator Checklist. Use when building or styling any web/mobile UI component, page, or dashboard.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications. Generates creative, polished code that avoids generic AI aesthetics.
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.
UI component design principles, visual hierarchy, spacing, typography for Next.js apps. Use when building or reviewing React/Next.js components, setting up design tokens, or establishing visual consistency.
Professional React development skill covering Next.js, React Server Components, Tailwind CSS, and the React ecosystem. Use this skill when building modern React applications, implementing Next.js features, creating UI components with shadcn/ui, or working with complex state management.
Use when the task asks for a visually strong landing page, website, app, prototype, demo, or game UI. This skill enforces restrained composition, image-led hierarchy, cohesive content structure, and tasteful motion while avoiding generic cards, weak branding, and UI clutter.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
Build an interface from the brief and the tokens rather than from a guess. Use only after grill-me, design-brief, information-architecture and design-tokens have run.
Create distinctive, production-grade frontend interfaces with intentional aesthetics, high craft, and non-generic visual identity. Use when building or styling web UIs, components, pages, dashboard...
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.
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.
Generates distinctive, high-quality frontend designs avoiding generic AI aesthetics. Use when building landing pages, UI components, dashboards, web apps, or any frontend/web design task.
Design and build professional, distinctive web frontends, and avoid or remove generic AI-generated design ("slop"). Use this skill whenever creating or styling any web UI, including websites, landing pages, dashboards, web apps, React or Vue components, HTML/CSS pages, artifacts, prototypes, and email templates. Also use it when auditing, unslopping, reviewing, or restyling an existing frontend or codebase, when a design looks generic, templated, or AI-generated, or when the user asks to make something look better, more polished, or more professional, even if they never say the word design or slop. Covers design direction, typography, color, layout, spacing, motion, copy tone, accessibility, and a final anti-slop audit, for new builds and for retrofitting existing frontends.
Skill de geração de apresentações (decks) em HTML single-file, com palco fixo 1920×1080 que escala uniformemente (letterbox, nunca reflow). Antes de escrever o deck inteiro, gera 3 previews reais de uma única slide (preset seguro, template ousado, curinga) para o usuário escolher por imagem, não por descrição em prosa. Cobre 12 presets nomeados, exporta para PDF via Playwright e deploy no Vercel. Trigger em: "criar uma apresentação", "gera os slides", "deck de apresentação", "slides em HTML", "apresentação para pitch", "slide deck", "converte esse PPTX", "apresentação estilo Keynote", "deck single-file", "slides fixos 16:9", "apresentação sem usar PowerPoint", "exportar essa apresentação em PDF".
Frontend patterns for modern web frameworks, component libraries, auth flows, and analytics. Use when building UI components, creating pages, implementing auth flows, adding analytics events, or working with component libraries. Do NOT use for API-only or backend-only changes.
Frontend patterns for Next.js App Router, Clerk auth, shadcn/Radix UI, and PostHog analytics. Use when building UI components, creating pages, implementing auth flows, or adding analytics events. Ensures consistent UX patterns and accessibility standards.
Interactive multi-level skill for scaffolding frontend projects from source. Use when user wants to: (1) Create a new frontend project (web, mobile, desktop, or cross-platform) (2) Set up a React, Vue, Svelte, Angular, Flutter, React Native, Electron, or Tauri project (3) Configure shadcn/ui with custom styling, colors, fonts, and components (4) Set up architecture patterns (Bulletproof React, Clean Architecture, Feature-based, etc.) (5) Add state management, data fetching, forms, validation, testing, or tooling
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.
Frontend Design Skill
Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics.
## Design Thinking
Before coding, commit to a BOLD
A folder with a SKILL.md file: a name, a description of when to use it, and instructions. Claude loads a skill only when the task matches its description.
How do I use one I find here?
Copy the folder into your project's .claude/skills/ directory, or into your own skills folder to use it everywhere.
What do the warnings mean?
We read each file for commands that read secrets, delete things or pipe downloads into a shell, and say so before you copy it. No warning is not a promise that a file is safe.
Which skills worked for people?
Open a skill to see its discussion. Reports from people and their agents are coming.
kumaran-isSkill
