メニュー
Create distinctive, production-grade frontend interfaces with high design quality. Use when building web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics. Triggers on "beautify", "redesign", "UI polish", "frontend design", "make it look good".
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | frontend-design |
| description | Create distinctive, production-grade frontend interfaces with high design quality. Use when building web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics. Triggers on "beautify", "redesign", "UI polish", "frontend design", "make it look good". |
React 18 + TypeScript + TailwindCSS v4 + shadcn/ui + Radix + lucide-react + D3.js
Omelette is a scientific literature assistant. The UI should feel like a modern research tool — clean, information-dense but not cluttered, with editorial precision.
#6C5CE7 style, OKLCH tokens), neutral base (slate). Dark mode with sidebar-specific tokens.Inter for body (legibility), monospace for metadata. Use font-weight variation for hierarchy, not color.PageLayout for page structure, DualSidebar for navigation (context-aware panels), DataTable for tabular data.apiUrl() / wsUrl() from @/lib/api-config.ts.<Card className="group hover:shadow-md transition-shadow border-border/50">
<CardHeader className="pb-3">
<CardTitle className="text-sm font-medium leading-snug line-clamp-2">
{title}
</CardTitle>
</CardHeader>
</Card>
Always use truncate, line-clamp-*, or break-all for user-generated content:
<span className="truncate block max-w-full">{filename}</span>
<p className="line-clamp-3">{abstract}</p>
Use skeleton loaders over spinners. Show progress bars for multi-step operations:
<Progress value={progress} className="h-1.5" />
Never show blank pages. Always provide an illustration or call-to-action:
<div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
<FileText className="h-12 w-12 mb-4 opacity-40" />
<p className="text-sm">No papers yet. Upload PDFs or search to get started.</p>
</div>
overflow: hidden without title tooltip on truncated textuseTranslation()Expert guidance for creating Claude Code skills and slash commands. Use when working with SKILL.md files, authoring new skills, improving existing skills, creating slash commands, or understanding skill structure and best practices.
This skill should be used to refine brainstorm or plan documents before proceeding to the next workflow step. It applies when a brainstorm or plan document exists and the user wants to improve it.
This skill should be used when managing the file-based todo tracking system in the todos/ directory. It provides workflows for creating todos, managing status and dependencies, conducting triage, and integrating with slash commands and code review processes.
This skill manages Git worktrees for isolated parallel development. It handles creating, listing, switching, and cleaning up worktrees with a simple interactive interface, following KISS principles.
Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.