ux-ui-layout
레이아웃 시스템 에이전트. 페이지 레이아웃과 그리드 시스템을 설계합니다.
Install with Tessl CLI
npx tessl i github:shaul1991/shaul-agents-plugin --skill ux-ui-layout40
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
32%Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.
The description identifies its domain (layout and grid systems) but is too brief and lacks critical components. It provides no explicit trigger guidance ('Use when...') and doesn't list specific concrete actions beyond generic 'designing'. The Korean language is fine but the content needs substantial improvement for skill selection accuracy.
Suggestions
Add an explicit 'Use when...' clause with trigger terms like 'grid layout', 'CSS grid', 'flexbox', 'responsive layout', 'column structure', or 'page structure'
List specific concrete actions such as 'create responsive grid layouts', 'define breakpoints', 'configure column spans', 'implement flexbox containers'
Include common file or technology references users might mention like '.css', 'CSS Grid', 'Bootstrap grid', or 'Tailwind layout'
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (layout systems, grid systems) and mentions 'designing' as an action, but lacks specific concrete actions like 'create responsive grids', 'define breakpoints', or 'configure column layouts'. | 2 / 3 |
Completeness | Describes what it does (designs page layouts and grid systems) but completely lacks a 'Use when...' clause or any explicit trigger guidance for when Claude should select this skill. | 1 / 3 |
Trigger Term Quality | Includes relevant terms like '레이아웃' (layout), '그리드 시스템' (grid system), and '페이지' (page), but missing common variations users might say like 'CSS grid', 'flexbox', 'responsive design', 'columns', or file format references. | 2 / 3 |
Distinctiveness Conflict Risk | Focuses on layout/grid systems which provides some specificity, but 'layout' and 'design' are broad terms that could overlap with UI design, CSS styling, or general web development skills. | 2 / 3 |
Total | 7 / 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 reads more like a job description than actionable guidance. It lists responsibilities and trigger keywords but provides zero concrete instructions, code examples, grid specifications, or layout patterns that Claude could actually use to design layouts. The content fails to teach Claude anything it doesn't already know.
Suggestions
Add concrete grid system specifications with actual CSS/code examples (e.g., 12-column grid with specific breakpoints and gap values)
Include at least 2-3 example layout patterns with executable code showing common page structures (header/sidebar/content/footer)
Define a clear workflow: 1) Analyze requirements → 2) Select grid system → 3) Define breakpoints → 4) Create layout structure → 5) Validate responsiveness
Reference or link to template files in the `docs/ui/layouts/` directory that demonstrate the expected output format
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The content is brief and doesn't over-explain concepts Claude knows, but it's so minimal that it lacks substance rather than being efficiently dense with useful information. | 2 / 3 |
Actionability | The skill provides only vague descriptions of responsibilities ('그리드 시스템 설계', '페이지 레이아웃 정의') with no concrete code, commands, examples, or executable guidance on how to actually perform these tasks. | 1 / 3 |
Workflow Clarity | There is no workflow defined - just a list of responsibilities without any sequence, steps, or validation checkpoints for how to design layouts or grids. | 1 / 3 |
Progressive Disclosure | The content is well-organized with clear sections and mentions an output location, but provides no references to detailed materials, examples, or templates that would help with actual implementation. | 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.