CtrlK
BlogDocsLog inGet started
Tessl Logo

kipper-frontend-design

创建独特、生产级别的前端界面,具有高设计质量。当用户要求构建 Web 组件、页面、artifacts、海报或应用程序时使用此技能(例如网站、落地页、仪表盘、React 组件、HTML/CSS 布局,或美化任何 Web UI)。生成富有创意、精致的代码和 UI 设计,避免千篇一律的 AI 美学风格。

81

Quality

78%

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./skills/kipper-frontend-design/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Discovery

92%

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

This is a strong skill description that clearly communicates its purpose for creating high-quality frontend interfaces. It excels at providing specific examples and natural trigger terms in Chinese, with explicit 'when to use' guidance. The main weakness is potential overlap with other coding or UI-related skills due to its broad scope.

DimensionReasoningScore

Specificity

Lists multiple specific concrete actions: 'Web 组件、页面、artifacts、海报或应用程序' with examples like '网站、落地页、仪表盘、React 组件、HTML/CSS 布局'. Also specifies quality attributes like '独特、生产级别' and '避免千篇一律的 AI 美学风格'.

3 / 3

Completeness

Clearly answers both what ('创建独特、生产级别的前端界面') AND when ('当用户要求构建 Web 组件、页面、artifacts、海报或应用程序时使用此技能') with explicit trigger guidance and examples.

3 / 3

Trigger Term Quality

Excellent coverage of natural terms users would say: 'Web 组件', '页面', 'artifacts', '海报', '应用程序', '网站', '落地页', '仪表盘', 'React 组件', 'HTML/CSS 布局', 'Web UI'. These are terms users naturally use when requesting frontend work.

3 / 3

Distinctiveness Conflict Risk

While it specifies frontend/UI focus with good examples, the broad scope (websites, dashboards, React components, HTML/CSS) could overlap with general coding skills or specific framework skills. The emphasis on 'high design quality' and avoiding 'AI aesthetic' helps differentiate but doesn't fully eliminate conflict risk.

2 / 3

Total

11

/

12

Passed

Implementation

64%

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

This skill provides strong actionable guidance for frontend design with excellent concrete examples for the image generation tool. However, it lacks validation workflows for the generated code and could be more concise by reducing repetitive warnings about 'AI aesthetics'. The content would benefit from clearer separation between overview and detailed reference material.

Suggestions

Add explicit validation steps after code implementation (e.g., 'Test in browser → Check responsive behavior → Validate accessibility')

Move the detailed image generation tool documentation to a separate TOOLS.md or IMAGE_GENERATION.md file, keeping only a brief overview with link in the main skill

Consolidate the repeated warnings about 'AI aesthetics' into a single concise 'Anti-patterns' section

DimensionReasoningScore

Conciseness

The content is reasonably efficient but includes some unnecessary elaboration, such as extensive lists of aesthetic styles and repeated emphasis on avoiding 'AI aesthetics'. The image generation section is well-structured but could be more concise.

2 / 3

Actionability

Provides fully executable bash commands for image generation with clear parameter explanations, concrete examples of prompts, and specific guidance on font choices, color schemes, and animation approaches. The tool usage is copy-paste ready.

3 / 3

Workflow Clarity

The design thinking section outlines a sequence (understand context → choose direction → implement), but lacks explicit validation checkpoints. For a skill involving code generation, there's no mention of testing, validation, or iteration steps after implementation.

2 / 3

Progressive Disclosure

Content is organized into logical sections (Design Thinking, Aesthetics Guide, Image Generation), but everything is in one file. The image generation section is detailed enough that it could be split into a separate reference file, and there are no links to external resources or examples.

2 / 3

Total

9

/

12

Passed

Validation

100%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation11 / 11 Passed

Validation for skill structure

No warnings or errors.

Repository
tibelf/ai_project_init
Reviewed

Table of Contents

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.