SIN-Code-Frontend-Design-Skill
Server Configuration
Describes the environment variables required to run the server.
| Name | Required | Description | Default |
|---|---|---|---|
No arguments | |||
Instructions
Guidance the server publishes about itself, which clients place ahead of the tool catalog so the model reads it before choosing anything.
This server publishes no instructions, or was last inspected before Glama recorded them.
Capabilities
Features and capabilities supported by this server
Protocol revision2025-11-25
| Capability | Details |
|---|---|
| tools | {
"listChanged": true
} |
| logging | {} |
| prompts | {
"listChanged": false
} |
| resources | {
"subscribe": false,
"listChanged": false
} |
| extensions | {
"io.modelcontextprotocol/ui": {}
} |
| experimental | {} |
Tools
Functions exposed to the LLM to take actions
| Name | Description |
|---|---|
| design_system_loadC | Load the SOTA design system (typography, color, spacing, motion, philosophy). |
| design_component_createC | Generate a UI component spec (button, input, card, modal). |
| design_page_scaffoldB | Scaffold a full page with sections (hero, features, pricing, cta, footer). |
| design_reviewB | Review existing UI code for design system consistency. |
| design_token_extractB | Extract design tokens from existing code. |
| design_a11y_checkB | Check WCAG 2.2 AA compliance of HTML code. |
| design_responsive_testC | Generate responsive breakpoints and identify current breakpoint. |
| design_figma_exportB | Export extracted tokens to Figma Tokens JSON. |
Prompts
Interactive templates invoked by user choice
| Name | Description |
|---|---|
No prompts | |
Resources
Contextual data attached and managed by the client
| Name | Description |
|---|---|
No resources | |
TDQS
Scored across 8 tools
Each tool targets a distinct aspect of frontend design: accessibility, component creation, Figma export, page scaffolding, responsive testing, design review, system loading, and token extraction. There is no overlap or ambiguity.
All tools follow the consistent pattern 'design_verb_noun' with clear verbs (check, create, export, scaffold, test, review, load, extract) and nouns. No naming convention violations.
With 8 tools, the set is well-scoped for a frontend design skill. It covers essential tasks without being too sparse or overwhelming.
The tools cover a complete design workflow: loading a design system, extracting tokens, exporting to Figma, creating component specs, scaffolding pages, testing accessibility and responsive behavior, and reviewing consistency. No obvious gaps.