chakra-ui
Build UIs with Chakra UI components, layout primitives, and theming. Use when using Chakra UI, ChakraProvider, Box, Flex, Stack, or when the user mentions Chakra.
Install with Tessl CLI
npx tessl i github:jamesmoss/frontend-skills --skill chakra-ui86
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
89%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 well-structured skill description that excels at trigger term coverage and completeness with an explicit 'Use when...' clause. The main weakness is that the capability description could be more specific about what concrete actions the skill enables beyond the general 'Build UIs' statement.
Suggestions
Expand the capabilities section with more specific actions like 'create responsive layouts, implement theming/dark mode, build accessible form components' to improve specificity.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (Chakra UI) and mentions some actions ('Build UIs', 'components', 'layout primitives', 'theming'), but doesn't list comprehensive specific actions like 'create responsive layouts', 'implement dark mode', or 'style form components'. | 2 / 3 |
Completeness | Clearly answers both what ('Build UIs with Chakra UI components, layout primitives, and theming') and when ('Use when using Chakra UI, ChakraProvider, Box, Flex, Stack, or when the user mentions Chakra') with explicit trigger guidance. | 3 / 3 |
Trigger Term Quality | Excellent coverage of natural terms users would say: 'Chakra UI', 'ChakraProvider', 'Box', 'Flex', 'Stack', and 'Chakra'. These are the exact component names and library references developers would mention. | 3 / 3 |
Distinctiveness Conflict Risk | Highly distinctive with Chakra-specific component names (ChakraProvider, Box, Flex, Stack) that wouldn't conflict with other UI frameworks like Material UI or Tailwind. Clear niche targeting. | 3 / 3 |
Total | 11 / 12 Passed |
Implementation
77%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is a solid Chakra UI reference skill with strong actionability through concrete props, component guidance, and a complete code example. The content is well-structured but slightly verbose in places, and could benefit from splitting detailed component references into a separate file for better progressive disclosure.
Suggestions
Tighten component descriptions to just props and usage patterns, removing explanatory phrases like 'Generic container; use for custom layout'
Consider splitting the detailed component reference (Common Components section) into a separate COMPONENTS.md and linking from the main skill
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | Content is mostly efficient but includes some explanatory text that could be tightened (e.g., 'Generic container; use for custom layout or when no semantic component fits'). The version note section and component descriptions add useful context but could be more telegraphic. | 2 / 3 |
Actionability | Provides concrete, executable code example with a complete v2-style form. Component props are specific and copy-paste ready (e.g., `colorScheme`, `variant`, `isLoading`). Clear guidance on which components to use when. | 3 / 3 |
Workflow Clarity | For a component library reference skill, workflow is appropriately simple. Clear guidance on version matching ('match the version already in the project'), component selection logic ('Prefer Stack/HStack/VStack for linear layouts'), and a 'What to Avoid' section provides implicit validation. | 3 / 3 |
Progressive Disclosure | Content is well-organized with clear sections, but everything is inline in one file. For a skill of this length (~100 lines), some content like the full component reference could be split into a separate REFERENCE.md, with SKILL.md focusing on quick patterns and linking out. | 2 / 3 |
Total | 10 / 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.
Validation — 11 / 11 Passed
Validation for skill structure
No warnings or errors.
- 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.