Frontend Design
majiayu000/spellbookCreate 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.
At a glance
This skill is for Design and helps you build a web component, create a frontend interface, and design a polished web page.
git clone --depth 1 https://github.com/majiayu000/spellbook
cp -r spellbook/skills/frontend-design ~/.claude/skills/frontend-design
Setup, runtime and requirements describe majiayu000/spellbook, the repo this skill ships in.
htmlcssjavascriptreactResponsiveUi
Also in majiayu000/spellbook
View the repoAudit AND optimize a CLAUDE.md / AGENTS.md instruction file — score it against the five high-leverage patterns, flag anti-patterns, then app...
Generate or update repository-specific AGENTS.md instruction files from real repo evidence. Use when asked to create, design, scaffold, spli...
REST/GraphQL/gRPC API design best practices. Use when designing APIs, defining contracts, handling versioning. Covers OpenAPI 3.2, GraphQL F...
Mobile app UI design expert for iOS and Android. Use when designing app interfaces, creating design systems, ensuring accessibility, or foll...
End-to-end app feature inventory and user-story testing workflow with a canonical tracker. Use when the user asks to audit every feature, de...
Design architecture foundations before implementation. Use when asked to design or refactor architecture, choose Rust/Go crate, package, mod...
Ask Grok or Gemini via opencli (browser-session based, no API cost). Use when the user says "问 grok", "问 gemini", "ask grok", "ask gemini"...
OAuth 2.1 + JWT authentication security best practices. Use when implementing auth, API authorization, token management. Follows RFC 9700 (2...
能力蒸馏工作流——从用户批准的强模型访谈或真实任务轨迹中提取非显然的判断规则，形成可审计的 judgment packet，再交给 skill-audit 和 skill-creato...
Clash Verge 诊断与配置管理。网络诊断、配置 AI 工具路由规则（Claude/Codex/Cursor/Warp）、查看/克隆订阅配置、切换配置文件。当用户遇到网络问题...
查看指定进程的代理线路。通过 Mihomo API 查询当前活跃连接，显示进程匹配的规则和代理链路。用于确认某个进程（如 claude、chrome）走的是哪条订阅...
对用户拥有或明确获授权的本机可执行文件、应用二进制和版本产物做只读静态逆向，包括 Claude Code 及其他 CLI、Mach-O、ELF、PE、Wasm 或打包应用。...
Other Design skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typog...
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art...
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right,...
Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explor...
Generate configurable chat motion overlays from a transcript or screenshot, including plain bubble scenes, app-style chat containers, option...
An annotated / redline lo-fi wireframe — a desktop landing/marketing page drawn as flat greyboxes inside a browser chrome frame, overlaid wi...