frontend-design
Frontend Design Skill
此技能指导创建独特的生产级前端界面,避免平庸的"AI 粗糙"美学。实现真正可用的代码,并高度关注美学细节和创意选择。
When to Use This Skill
使用此技能当用户请求:
- 构建 Web 组件、页面或完整应用程序
- 创建着陆页、仪表盘或营销页面
- 设计 React、Vue 或原生 HTML/CSS 界面
- 美化或重新设计现有的 Web UI
- 创建海报、素材或视觉设计元素(用于 Web)
- 需要高设计品质和独特美学的任何前端项目
关键触发词: Web 组件、页面、应用、网站、着陆页、仪表盘、React 组件、HTML/CSS、UI 设计、美化、前端
核心原则
在编写代码之前,必须进行深入的设计思考。每个界面都应该是独特的、有意图的、令人难忘的。
More from yyh211/claude-meta-skill
daily-ai-news
Aggregates and summarizes the latest AI news from multiple sources including AI news websites and web search. Provides concise news briefs with direct links to original articles. Activates when user asks for 'today's AI news', 'AI updates', 'latest AI developments', or mentions wanting a 'daily AI briefing'.
2.1Kdry-refactoring
Guides systematic code refactoring following the DRY (Don't Repeat Yourself) principle. Use when user asks to eliminate code duplication, refactor repetitive code, apply DRY principle, or mentions code smells like copy-paste, magic numbers, or repeated logic. Implements a 4-step workflow from identifying repetition to verified refactoring.
50deep-reading-analyst
Comprehensive framework for deep analysis of articles, papers, and long-form content using 10+ thinking models (SCQA, 5W2H, critical thinking, inversion, mental models, first principles, systems thinking, six thinking hats). Use when users want to: (1) deeply understand complex articles/content, (2) analyze arguments and identify logical flaws, (3) extract actionable insights from reading materials, (4) create study notes or learning summaries, (5) compare multiple sources, (6) transform knowledge into practical applications, or (7) apply specific thinking frameworks. Triggered by phrases like 'analyze this article,' 'help me understand,' 'deep dive into,' 'extract insights from,' 'use [framework name],' or when users provide URLs/long-form content for analysis.
46create-skill-file
Guides Claude in creating well-structured SKILL.md files following best practices. Provides clear guidelines for naming, structure, and content organization to make skills easy to discover and execute.
45prompt-optimize
Expert prompt engineering skill that transforms Claude into "Alpha-Prompt" - a master prompt engineer who collaboratively crafts high-quality prompts through flexible dialogue. Activates when user asks to "optimize prompt", "improve system instruction", "enhance AI instruction", or mentions prompt engineering tasks.
39fastgpt-workflow-generator
Generates production-ready FastGPT workflow JSON from natural language requirements. Uses AI-powered semantic template matching from built-in workflows (document translation, sales training, resume screening, financial news). Performs three-layer validation (format, connections, logic completeness). Supports incremental modifications to add/remove/modify nodes. Activates when user asks to "create FastGPT workflow", "generate workflow JSON", "design FastGPT application", or mentions workflow automation, multi-agent systems, or FastGPT templates.
35