メニュー
Create distinctive, production-grade frontend interfaces with high design quality. Avoids generic AI aesthetics in favor of premium, modern UI.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Enforces use of Context7 MCP for all external library documentation. Prevents API hallucination by requiring real-time doc fetching before any external library call. Auto-triggered when external library usage is detected in code context.
Reading coach: guides users through books systematically with knowledge compilation, mastery testing, spaced repetition, and knowledge querying. Triggers on "read this book", "book study", "start studying", "/book-study".
Automates browser interactions for web testing, form filling, screenshots, and data extraction. Use when the user needs to navigate websites, interact with web pages, fill forms, take screenshots, or extract information from web pages.
Use this skill whenever the user wants to do anything with PDF files. This includes reading or extracting text/tables from PDFs, combining or merging multiple PDFs into one, splitting PDFs apart, rotating pages, adding watermarks, creating new PDFs, filling PDF forms, encrypting/decrypting PDFs, extracting images, and OCR on scanned PDFs to make them searchable. If the user mentions a .pdf file or asks to produce one, use this skill.
When the user wants to audit, review, or diagnose SEO issues on their site. Also use when the user mentions "SEO audit," "technical SEO," "why am I not ranking," "SEO issues," "on-page SEO," "meta tags review," "SEO health check," "my traffic dropped," "lost rankings," "not showing up in Google," "site isn't ranking," "Google update hit me," "page speed," "core web vitals," "crawl errors," or "indexing issues." Use this even if the user just says something vague like "my SEO is bad" or "help with SEO" — start with an audit. For building pages at scale to target keywords, see programmatic-seo. For adding structured data, see schema-markup. For AI search optimization, see ai-seo.
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.
| name | frontend-design |
| description | Create distinctive, production-grade frontend interfaces with high design quality. Avoids generic AI aesthetics in favor of premium, modern UI. |
| allowed-tools | ["generate_image","write_to_file"] |
This skill ensures every UI generated feels premium, alive, and professional.
Before coding, commit to a BOLD aesthetic direction:
Implement a cohesive design system using CSS variables:
Make the interface feel "alive":
Produce production-grade HTML/CSS/JS or React code.
generate_image.| File | Purpose |
|---|---|
| premium-ui-checklist.md | Checklist for visual excellence |
| color-palettes.md | Curated color combinations |