Create distinctive, production-grade UI visuals across web and native: layout, typography, color, hierarchy, and aesthetic direction that avoid generic "AI slop". Use whenever the goal is visual design quality, aesthetic direction, or beautifying an interface (web, React Native, or native). Do NOT use for state management, data fetching, rendering performance, or framework/component architecture (use senior-frontend), or for animation and gesture mechanics (use motion-craft).
Build modern, performant frontend UIs: component design, state management, rendering performance, and accessibility. Covers React and Next.js (web) plus React Native, with framework-specific mechanics in reference files; the judgment applies cross-framework. Use whenever the user builds or optimizes UI components, manages client or server state, or fixes frontend performance including list virtualization and scroll or render jank (e.g. FlatList). Do NOT use for visual or aesthetic design direction (use frontend-design), or for animation and gesture craft (use motion-craft).
Build or change a page, view or data-driven feature in the Next.js frontend — a route under the dashboard, wiring UI to a backend endpoint, a Zustand store, a permission that must hide a control, or localized copy. Use for any work in frontend/src, including "the page renders but shows an empty state" and "this button should not be visible to a Viewer".
Implements user interface work state by state: empty, loading, error, partial, and degenerate content, with native elements, derived state, and keyboard support. Use when building or changing a component, page, form, or flow, or when a UI change needs to hold up outside the happy path.
Build or modify frontend interfaces using repository-native components while preserving accessibility, responsive behavior, state handling, and visual verification. Use for UI features, design implementation, forms, client-side defects, and frontend refactors; do not use for backend-only or infrastructure-only work.
Visual design and aesthetic direction for frontend interfaces. Use when building web pages, landing pages, dashboards, Next.js server components, or applications where visual identity matters. For React patterns and testing, use react-frontend.
Subject-matter expert for the Council of AI (councilof.ai) front end — its architecture, the EU-gov-style library IA, the 8 content sectors, the naming canon, the deploy path, and the align-not-delete cleanup process. Load for any councilof.ai front-end work: cleanup, alignment, new pages, deploys.
Convert text into beautiful Xiaohongshu (小红书 / RED) image carousels. Use when the user wants to make 小红书图片、RED notes、图文笔记、图片排版、九宫格、朋友圈/微博图片. Generates 1080×1440 (3:4) or 1080×1080 (1:1) cards as a single HTML preview plus an optional Playwright script that exports each card to PNG. Includes 12 curated styles tuned for Chinese typography (奶油拿铁、莫兰迪、多巴胺、校园手账、极简黑白、港风胶片、杂志大字、暗黑科技、国风水墨、日系治愈、复古杂志、咖啡店黑板).
Use this skill when asked to integrate the Zama Relayer SDK, build a frontend for an FHEVM contract, connect a React app to a confidential smart contract, encrypt inputs in the browser, user decrypt encrypted values, public decrypt revealed values, implement EIP-712 signing for fhEVM, initialize a Relayer SDK instance, handle encrypted balances in UI, build a confidential token frontend, integrate MetaMask with fhEVM, or display decrypted results from an encrypted smart contract.
Create distinctive, production-grade frontend interfaces with high design quality. Use when building or refining web components, pages, or apps (HTML/CSS/JS/React) with bold aesthetics, purposeful layouts, motion, and accessibility. Avoid generic AI-looking output.
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.
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.
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.
jakubsuplickiSkill
