ux-ui-responsive
반응형 디자인 에이전트. 다양한 디바이스에 대응하는 반응형 디자인을 검토합니다.
Install with Tessl CLI
npx tessl i github:shaul1991/shaul-agents-plugin --skill ux-ui-responsive37
Does it follow best practices?
If you maintain this skill, you can automatically optimize it using the tessl CLI to improve its score:
npx tessl skill review --optimize ./path/to/skillValidation for skill structure
Discovery
22%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 description is too vague and incomplete for effective skill selection. It lacks concrete actions, explicit trigger conditions, and sufficient keywords. The description would benefit significantly from specifying what responsive design tasks it performs and when it should be activated.
Suggestions
Add a 'Use when...' clause with explicit triggers like 'Use when reviewing CSS breakpoints, checking mobile layouts, or when the user mentions responsive, mobile-first, or viewport issues'
List specific concrete actions such as 'Analyzes breakpoint coverage, validates media queries, checks touch target sizes, reviews viewport meta tags'
Include natural trigger terms users would say: 'mobile', 'tablet', 'breakpoints', 'media queries', '@media', 'viewport', 'screen sizes'
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | The description uses vague language like '검토합니다' (reviews) without specifying concrete actions. It doesn't list what specific tasks it performs beyond generic 'reviewing responsive design'. | 1 / 3 |
Completeness | The description only weakly addresses 'what' (reviews responsive design) and completely lacks a 'Use when...' clause or any explicit trigger guidance for when Claude should select this skill. | 1 / 3 |
Trigger Term Quality | Contains some relevant keywords like '반응형 디자인' (responsive design) and '디바이스' (device), but lacks common variations users might say such as 'mobile', 'breakpoints', 'media queries', 'viewport', or file types. | 2 / 3 |
Distinctiveness Conflict Risk | While '반응형 디자인' provides some specificity, the description could overlap with general CSS skills, UI review skills, or design audit tools. The lack of specific triggers increases conflict risk. | 2 / 3 |
Total | 6 / 12 Passed |
Implementation
22%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This skill content is essentially a role description rather than actionable guidance. It lists responsibilities (breakpoint definition, responsive layout review, mobile-first design) but provides zero concrete instructions, examples, or criteria for how to perform these tasks. The content would not enable Claude to actually review or create responsive designs.
Suggestions
Add specific breakpoint values and examples (e.g., mobile: 320-767px, tablet: 768-1023px, desktop: 1024px+) with CSS/Tailwind code snippets
Include a concrete checklist or workflow for reviewing responsive designs (e.g., 1. Check breakpoints, 2. Verify touch targets, 3. Test content reflow)
Provide example review output format showing what a responsive design review should contain
Add specific criteria for mobile-first design evaluation with good/bad examples
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The content is brief and doesn't over-explain concepts Claude knows, but it's essentially just a list of responsibilities without actionable content, making the brevity feel more like incompleteness than efficiency. | 2 / 3 |
Actionability | The skill provides no concrete guidance, code examples, breakpoint values, or specific instructions. It only describes what the agent does ('브레이크포인트 정의', '반응형 레이아웃 검토') without showing how to do any of it. | 1 / 3 |
Workflow Clarity | There is no workflow defined - just a list of responsibilities with no sequence, steps, or validation checkpoints. No guidance on how to actually review responsive designs or what constitutes a proper review. | 1 / 3 |
Progressive Disclosure | The skill mentions an output location (`docs/ui/responsive/`) which suggests some structure, but there are no references to detailed guides, examples, or supporting documentation that would help with the actual work. | 2 / 3 |
Total | 6 / 12 Passed |
Validation
90%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 10 / 11 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
allowed_tools_field | 'allowed-tools' contains unusual tool name(s) | Warning |
Total | 10 / 11 Passed | |
- 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.