Skip to main content
Glama
OpenSIN-Code

SIN-Code-Frontend-Design-Skill

by OpenSIN-Code

SIN-Code-Frontend-Design-Skill

GitNexus CEO Audit

SOTA design system + philosophy (Anthropic-compatible). 8 MCP tools, 6 bash scripts, 100% CoDocs, 202 passing tests. Falls back to templates if the v0-pool is offline.

The SIN counterpart to Anthropic's official frontend-design skill (277K installs). Provides a design system, component generator, page scaffolder, and WCAG 2.2 AA checker that agents load before writing frontend code.

Architecture

Agent (opencode / Cursor / Claude)
    ↓ loads skill
SIN-Code-Frontend-Design-Skill
    ├─ MCP tools (8)
    ├─ Bash scripts (6)
    ├─ Python modules (8)
    └─ v0-pool integration (http://localhost:27401/v1)
         ↓ complex prompts
    SINator-v0 (v0-1.5-lg)
         ↓ simple prompts
    v0-1.5-md
         ↓ offline → templates
    Built-in component specs

Related MCP server: Lawrence's Personal MCP Server

MCP Tools

Tool

Purpose

design_system_load

Load the SOTA design system (tokens, themes, philosophy)

design_component_create

Generate button/input/card/modal specs

design_page_scaffold

Scaffold a full page from a layout + sections

design_review

Review code for design system consistency

design_token_extract

Extract tokens from CSS/Tailwind/JSON/Figma

design_a11y_check

WCAG 2.2 AA compliance check + contrast

design_responsive_test

Generate breakpoints, identify current tier

design_figma_export

Export tokens to Figma Tokens JSON

Quick-Start

git clone https://github.com/OpenSIN-Code/SIN-Code-Frontend-Design-Skill.git
cd SIN-Code-Frontend-Design-Skill
chmod +x install.sh
./install.sh

Usage

As MCP server

# Launch the FastMCP server
python3 -m sin_frontend_design.mcp_server

From Python

from sin_frontend_design import (
    DesignSystem,
    ComponentGenerator,
    PageScaffolder,
    DesignReviewer,
    TokenExtractor,
    A11yChecker,
    BreakpointGenerator,
)

# 1. Load the design system
ds = DesignSystem()
print(ds.philosophy())

# 2. Generate a component
g = ComponentGenerator()
button = g.button(framework="react", variant="primary", size="md", label="Save")
print(button.code)

# 3. Scaffold a page
s = PageScaffolder()
page = s.scaffold(layout="landing", framework="html", title="My SaaS")
print(page.code)

# 4. Review existing UI
reviewer = DesignReviewer()
report = reviewer.review("<button>Click</button>")
print(report.score, report.findings)

# 5. Extract tokens from existing CSS
extractor = TokenExtractor()
tokens = extractor.extract(open("tokens.css").read(), source_format="css")

# 6. Check WCAG 2.2 AA
checker = A11yChecker()
a11y = checker.check(open("page.html").read())
print(a11y.ok, a11y.score)

# 7. Get responsive breakpoints
bg = BreakpointGenerator()
print(bg.test(viewport_width=1280))  # 'lg'

From shell

# Load the design system
./scripts/design-load.sh

# Generate components
./scripts/design-component.sh button --framework=react --variant=primary
./scripts/design-component.sh input --framework=html --placeholder="Email"
./scripts/design-component.sh card --framework=react
./scripts/design-component.sh modal --use-v0

# Scaffold a page
./scripts/design-page.sh landing --framework=html --title="My SaaS"
./scripts/design-page.sh pricing --framework=react

# Review UI
./scripts/design-review.sh path/to/page.html
echo "<button>Click</button>" | ./scripts/design-review.sh -

# Extract tokens
./scripts/design-tokens.sh tokens.css
./scripts/design-tokens.sh tailwind.config.js --format=tailwind

# Check accessibility
./scripts/design-a11y.sh page.html
./scripts/design-a11y.sh page.html --fg=#000000 --bg=#ffffff

Design Philosophy

  1. Hierarchy is created by contrast, not by decoration.

  2. Type is the primary voice — choose one family and use scale.

  3. Color is functional: primary, secondary, success, warning, error, neutral.

  4. Spacing follows a 4px grid — never arbitrary values.

  5. Motion is felt, not seen: 200ms hovers, 300ms transitions.

  6. Components are predictable: same name, same shape, same tokens.

  7. States are explicit: default, hover, focus, active, disabled.

  8. Accessibility is non-negotiable: WCAG 2.2 AA is the floor.

  9. Dark mode is not inverted — it's a parallel semantic map.

  10. Famous brands feel calm because they use restraint.

Token reference

Typography (px)

12 · 14 · 16 · 18 · 20 · 24 · 30 · 36 · 48 · 60 · 72

Spacing (px, 4px grid)

4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96

Motion

  • Hover: 200ms ease-out

  • Transition: 300ms ease-in-out

  • Page: 500ms cubic-bezier(0.16, 1, 0.3, 1)

Radius

  • Default: 8px

  • Card: 16px

Color ramps (50–900)

  • neutral — slate

  • primary — indigo

  • secondary — violet

  • success — green

  • warning — amber

  • error — red

Tests

# All tests
PYTHONPATH=src python3 -m pytest tests/ -v
# 202 passed

CoDocs

100% CoDocs coverage — every .py in src/sin_frontend_design/ has a matching .doc.md companion, and every .sh script and test file does too.

v0-pool integration

The design_component_create tool calls the v0-pool at http://localhost:27401/v1 when use_v0=true:

  • Complex prompts (>200 chars) → v0-1.5-lg

  • Simple prompts → v0-1.5-md

  • Offline / failure → fall back to built-in templates

Files

SIN-Code-Frontend-Design-Skill/
├── README.md
├── SKILL.md
├── CHANGELOG.md
├── AGENTS.md
├── INSTALL.md
├── install.sh
├── pyproject.toml
├── requirements.txt
├── .gitignore
├── .github/workflows/ceo-audit.yml
├── src/sin_frontend_design/
│   ├── __init__.py (+ .doc.md)
│   ├── system.py (+ .doc.md)     — typography, color, spacing, motion
│   ├── components.py (+ .doc.md)  — button/input/card/modal specs
│   ├── pages.py (+ .doc.md)       — page scaffolder (hero, features, ...)
│   ├── reviewer.py (+ .doc.md)    — design system review
│   ├── tokens.py (+ .doc.md)      — token extraction (CSS/Tailwind/Figma)
│   ├── a11y.py (+ .doc.md)        — WCAG 2.2 AA checker
│   ├── responsive.py (+ .doc.md)  — breakpoint generator
│   └── mcp_server.py (+ .doc.md)  — FastMCP server with 8 tools
├── scripts/
│   ├── design-load.sh
│   ├── design-component.sh
│   ├── design-page.sh
│   ├── design-review.sh
│   ├── design-tokens.sh
│   └── design-a11y.sh
└── tests/
    ├── test_system.py
    ├── test_components.py
    ├── test_pages.py
    ├── test_reviewer.py
    ├── test_tokens.py
    ├── test_a11y.py
    ├── test_responsive.py
    ├── test_server.py
    ├── test_scripts.py
    └── test_codocs.py

License

OpenSIN AI · Open source · Built for agents.

Available Tools

8 tools
design_a11y_checkB

Check WCAG 2.2 AA compliance of HTML code.

ParametersJSON Schema
NameRequiredDescriptionDefault
codeYesHTML source to check.
backgroundNoOptional background hex color for contrast check.
foregroundNoOptional foreground hex color for contrast check.

Output Schema

ParametersJSON Schema
NameRequiredDescription
resultYes

TDQS

B3.2/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations provided, so description must carry full burden. It implies a read-only check but does not disclose non-obvious behaviors (e.g., network calls, authentication needs, or side effects).

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Single sentence, front-loaded with core purpose. No superfluous words.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Despite having an output schema, the description omits practical usage context (e.g., how optional background/foreground interact, expected output format). Agent may lack sufficient guidance.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100% with clear parameter definitions. The tool description adds no further meaning beyond what schema already provides, so baseline 3 applies.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

Description clearly states the tool checks WCAG 2.2 AA compliance of HTML code, specifying a standard and resource type, distinguishing it from sibling tools.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

No explicit guidance on when to use this tool versus alternatives like design_review. Lacks when-to-use statements or exclusions.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

design_component_createC

Generate a UI component spec (button, input, card, modal).

ParametersJSON Schema
NameRequiredDescriptionDefault
sizeNoSize token (xs|sm|md|lg|xl).md
labelNoButton label (for button).
titleNoModal/card title.
use_v0NoIf true, attempt v0 code generation first; fall back to templates.
variantNoVisual variant (primary|secondary|ghost|outline|danger).primary
componentYesComponent name (button|input|card|modal).
frameworkNoTarget framework (react|vue|svelte|html).react
placeholderNoInput placeholder (for input).

Output Schema

ParametersJSON Schema
NameRequiredDescription
resultYes

TDQS

C2.9/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description must disclose behavioral traits. It only states 'Generate a UI component spec', leaving out details like mutability, side effects, generation method, or fallback behavior hinted by the use_v0 parameter.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single concise sentence that front-loads the verb 'Generate'. It is efficient but could include more context without being verbose.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the tool has 8 parameters, no annotations, and an output schema exists, the description is too minimal. It lacks behavioral context, usage context, and details about the generated output beyond the vague 'component spec'.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100% with all 8 parameters described in the schema. The description adds no additional semantics beyond the schema, so baseline score of 3 is appropriate.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool generates a UI component spec with examples (button, input, card, modal). It uses a specific verb and resource, but does not explicitly differentiate from sibling tools like design_page_scaffold.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

No guidance on when to use this tool versus alternatives. No when-not-to-use conditions or prerequisites are mentioned.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

design_figma_exportB

Export extracted tokens to Figma Tokens JSON.

ParametersJSON Schema
NameRequiredDescriptionDefault
sourceYesSource code with design tokens.
source_formatNoFormat of source (css|scss|tailwind|json|figma).css

Output Schema

ParametersJSON Schema
NameRequiredDescription
resultYes

TDQS

B3.4/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations provided, so description carries full burden. Only states export action without disclosing whether this is a write operation, permissions needed, side effects, or what happens to input. Minimal behavioral context.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Very concise single sentence, front-loaded with action and output. Could benefit from slight structuring (e.g., listing input expectations), but efficient for a simple tool.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

With output schema existing, return value is partially covered, but description does not clarify whether export generates a file or returns JSON, or if tool is read-only or modifies state. Adequate but leaves gaps.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema covers both parameters with descriptions (100% coverage), so baseline 3. Description adds no extra meaning beyond parameter names and types; e.g., no hints on format usage or validation.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

Description clearly states it exports extracted tokens to Figma Tokens JSON, distinguishing from sibling design_token_extract which extracts tokens. Specific verb+resource with output format indicated.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Implied usage after token extraction, but no explicit when-to-use or when-not-to-use guidance. Does not reference alternatives or context for when to use this tool vs siblings.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

design_page_scaffoldB

Scaffold a full page with sections (hero, features, pricing, cta, footer).

ParametersJSON Schema
NameRequiredDescriptionDefault
titleNoPage title.Untitled page
layoutNoPage layout (landing|pricing|docs|blog).landing
frameworkNoTarget framework (html|react|vue|svelte).html

Output Schema

ParametersJSON Schema
NameRequiredDescription
resultYes

TDQS

B3.2/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations provided, so description carries full burden. It states the action but doesn't disclose behavioral traits like side effects, permissions, or output behavior.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Single sentence with no waste, efficiently states purpose. Could include more context but remains appropriately concise.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given output schema exists and schema coverage is high, the description is adequate but lacks usage context and behavioral details, making it not fully complete.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100%, so the schema already describes parameters. The description adds no additional meaning beyond what's in the input schema, meeting baseline.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the verb 'scaffold' and the resource 'full page with sections (hero, features, pricing, cta, footer)'. It distinguishes from siblings which focus on different aspects like a11y, component creation, export, etc.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

No guidance on when to use this tool vs alternatives. Sibling names imply different purposes but description provides no explicit context or exclusions.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

design_responsive_testC

Generate responsive breakpoints and identify current breakpoint.

ParametersJSON Schema
NameRequiredDescriptionDefault
include_cssNoIf true, include a full CSS payload.
viewport_widthNoCurrent viewport width in pixels.

Output Schema

ParametersJSON Schema
NameRequiredDescription
resultYes

TDQS

C2.8/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description carries full burden for behavioral disclosure. It does not state whether the tool is read-only, modifies state, or requires authentication. The simple verb 'generate' implies a read-like operation but is ambiguous.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness3/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single sentence with no wasted words, but it is too brief and lacks detail that would help an agent. It could be more informative without sacrificing conciseness.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given that an output schema exists (per context signals), the description need not detail return values. However, the description is insufficient for a tool with 2 parameters and no annotations; it fails to provide context on tool behavior or usage scenarios.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100%, with both parameters documented. The description adds no extra meaning beyond the schema definitions. Baseline 3 is appropriate.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states it generates responsive breakpoints and identifies the current breakpoint. The verb-resource pair is specific and distinguishes this tool from siblings like design_a11y_check or design_component_create, though the output's exact nature could be more precise.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides no guidance on when to use this tool vs alternatives, no prerequisites, and no context about typical use cases. It is a bare statement of functionality.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

design_reviewB

Review existing UI code for design system consistency.

ParametersJSON Schema
NameRequiredDescriptionDefault
codeYesSource code to review (HTML/CSS/JSX/TSX).

Output Schema

ParametersJSON Schema
NameRequiredDescription
resultYes

TDQS

B3.3/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations provided; description only says 'review' but does not disclose behavioral traits such as destructive potential, auth needs, or side effects. The tool likely reads code without modification, but this is unconfirmed.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Single sentence of 8 words, front-loaded with key action and purpose. No superfluous information, earns its place.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the tool has one parameter and an output schema, the description is minimal. It doesn't explain what 'design system consistency' entails but is sufficient for a straightforward review. Could benefit from clarifying what is reviewed (e.g., colors, typography, spacing).

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

With 100% schema description coverage, the single parameter 'code' is already well-documented in the schema. The description adds no additional meaning beyond the schema, so baseline 3 is appropriate.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

Description clearly states verb 'Review' and resource 'UI code' with specific purpose 'design system consistency', distinguishing it from siblings like design_a11y_check (accessibility) and design_component_create (creation).

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

No explicit guidance on when to use this tool over alternatives. Implied use for consistency checks, but no mention of when not to use or comparisons with siblings like design_responsive_test.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

design_system_loadC

Load the SOTA design system (typography, color, spacing, motion, philosophy).

ParametersJSON Schema
NameRequiredDescriptionDefault
nameNoDesign system name (default = built-in SOTA tokens).default

Output Schema

ParametersJSON Schema
NameRequiredDescription
resultYes

TDQS

C2.9/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are present, so the description must fully disclose behavior. The term 'load' suggests a read operation, but side effects, required permissions, or state changes are not mentioned. The existence of an output schema is not utilized in the description.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single sentence, concise and to the point. It could potentially add more detail without becoming verbose, but current structure is efficient.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the tool has one parameter and an existing output schema, the description covers the core purpose but lacks details on return value, behavior, and usage in context of sibling tools. It is minimally viable but not fully comprehensive.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The single parameter 'name' has a full schema description, achieving 100% coverage. The tool description adds context about loading the 'SOTA' system and listing components, but this only marginally supplements the schema.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool loads a design system and lists its components (typography, color, etc.), making the purpose specific. However, it does not explicitly differentiate from sibling tools, though the distinct action 'load' sets it apart.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

No guidance is provided on when to use this tool versus alternatives like design_token_extract or design_page_scaffold. The description lacks context such as prerequisites or use cases.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

design_token_extractB

Extract design tokens from existing code.

ParametersJSON Schema
NameRequiredDescriptionDefault
sourceYesSource code to parse.
source_formatNoFormat hint (css|scss|tailwind|json|figma).css

Output Schema

ParametersJSON Schema
NameRequiredDescription
resultYes

TDQS

B3.1/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description must carry the full burden of behavioral disclosure. It only states 'extract design tokens' without explaining the extraction process, side effects, or limitations (e.g., file size limits, output format). This is insufficient for safe invocation.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, efficient sentence with no extraneous words. However, it could be more informative without sacrificing conciseness, earning a 4 rather than a 5.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Despite having an output schema (which reduces the need to document return values), the description is too sparse. It does not explain what 'extract' means, what kind of tokens are found, or how the tool handles multiple files or edge cases. For a tool with 2 parameters and sibling tools, more context is needed.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The input schema has 100% description coverage for both parameters (source, source_format). The description adds no additional meaning beyond the schema, so the baseline score of 3 is appropriate.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the action (extract) and the resource (design tokens) with a specific source (existing code). It distinguishes from sibling tools like design_a11y_check and design_component_create, which have different purposes.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

No guidance is provided on when to use this tool versus alternatives, such as when to prefer it over other design tools. The description lacks context about prerequisites or typical scenarios.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

TDQS

A3.6/5.0
Disambiguation5/5

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.

Naming Consistency5/5

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.

Tool Count5/5

With 8 tools, the set is well-scoped for a frontend design skill. It covers essential tasks without being too sparse or overwhelming.

Completeness5/5

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.

Maintenance

ActivitySlowing
ResponsivenessSyncing

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Connectors

Related MCP Servers

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/OpenSIN-Code/SIN-Code-Frontend-Design-Skill'

If you have feedback or need assistance with the MCP directory API, please join our Discord server