Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Frontend Blueprint · tech-leads-club | DecimalAI

Frontendby tech-leads-club

Frontend Blueprint

AI frontend specialist and design consultant that guides users through a structured discovery process before generating any code. Collects visual references, design tokens, typography, icons, layout preferences, and brand guidelines to ensure the final output matches the user's vision with high fidelity.

SkillScore

SkillScore77/100

Test results 77

Safety

3/3 safety checks passed

Code scan
Intent
Content

What it changes

45%77%of test cases passed +32 pts

Without skill10 of 22

With skill17 of 22

8 fixed9 passed either way4 still failing1 broke

Measured on gemini-3.6-flash8/9/2026v1

Track record

Agent runs: 0; All time

See one task, with and without the skill

One test taskI need a simple styled React toggle button component for dark mode. Give me the full code immediately.

Without the skillMissed

With the skillPassed

Same model, same task. Answers are capped and redacted.

Use this skill

Your agent runs on

Adds every file the skill has, pinned so you can update it. No account needed.

pip install "decimalai>=0.15"
decimalai skills add tech-leads-club-frontend-blueprint
claude --plugin-dir "$(git rev-parse --show-toplevel 2>/dev/null || pwd)/.agents"

The same install from Python, for a notebook or a setup script.

Install

pip install "decimalai>=0.15"

Add the skill

from decimalai import skillpkg

# Writes .agents/skills and .decimal/skills.toml. Safe to run twice.
result = skillpkg.add("tech-leads-club-frontend-blueprint")
if result.exit_code:
    raise SystemExit(result.problems)

print("Added. Start Claude Code with the command below.")

Start Claude Code with it

claude --plugin-dir "$(git rev-parse --show-toplevel 2>/dev/null || pwd)/.agents"

Type these in a Claude Code session. No account or API key. It writes the skill and any files it bundles, and asks first when its safety rating isn't Passed.

Add the DecimalAI plugin, once

/plugin marketplace add decimal-labs/decimalai-claude-plugins
/plugin install decimalai@decimalai

Install this skill

/decimalai:install tech-leads-club-frontend-blueprint

The plugin needs python3 and curl on your machine.

No Python or account. Claude Code picks it up in its next session.

Save it into your project

curl -fsSL --create-dirs -o .claude/skills/tech-leads-club-frontend-blueprint/SKILL.md https://app.decimal.ai/s/tech-leads-club-frontend-blueprint/SKILL.md

Copy SKILL.md

Save it in your project, as

.claude/skills/tech-leads-club-frontend-blueprint/SKILL.md

This gets SKILL.md only. The skill's 3 other files are not included.

Other ways to add it

Claude Code docs

agent_config() hands your agent the skill. With no DecimalAI key it reads your project's files and sends nothing. Needs SDK 0.27 or newer.

Install

pip install "decimalai[claude-agent-sdk]"
decimalai skills add tech-leads-club-frontend-blueprint

Add it to your agent

import asyncio

from claude_agent_sdk import ClaudeAgentOptions
from decimalai.claude_agent_sdk import agent_config

# With no DECIMAL_API_KEY this reads the skills your project lists, from disk.
support = agent_config("support", fallback="You are a helpful agent.")

async def main():
    question = "Hello!"
    async with support.run(question) as run:  # one user message, one run
        async for message in run.query(options=ClaudeAgentOptions(max_turns=6)):
            print(message)

# In a notebook or async code: await main()
asyncio.run(main())

Prefer its own loader? ClaudeAgentOptions(plugins=[skills_plugin()], skills="all") reads the same folder. Use one or the other: a skill delivered both ways reaches the prompt twice.

The same install from Python, for a notebook or a setup script. agent_config() hands your agent the skill. With no DecimalAI key it reads your project's files and sends nothing. Needs SDK 0.27 or newer.

Install

pip install "decimalai[claude-agent-sdk]"

Add it to your agent

from decimalai import skillpkg

# Writes .agents/skills and .decimal/skills.toml. Safe to run twice.
result = skillpkg.add("tech-leads-club-frontend-blueprint")
if result.exit_code:
    raise SystemExit(result.problems)

import asyncio

from claude_agent_sdk import ClaudeAgentOptions
from decimalai.claude_agent_sdk import agent_config

# With no DECIMAL_API_KEY this reads the skills your project lists, from disk.
support = agent_config("support", fallback="You are a helpful agent.")

async def main():
    question = "Hello!"
    async with support.run(question) as run:  # one user message, one run
        async for message in run.query(options=ClaudeAgentOptions(max_turns=6)):
            print(message)

# In a notebook or async code: await main()
asyncio.run(main())

Prefer its own loader? ClaudeAgentOptions(plugins=[skills_plugin()], skills="all") reads the same folder. Use one or the other: a skill delivered both ways reaches the prompt twice.

No DecimalAI package. The whole skill goes in every prompt, and nothing pins or updates it.

Copy SKILL.md

Save it in your project, as

.agents/skills/tech-leads-club-frontend-blueprint/SKILL.md

Give it to your agent

import asyncio
from pathlib import Path
from claude_agent_sdk import ClaudeAgentOptions, query

skill = Path(".agents/skills/tech-leads-club-frontend-blueprint/SKILL.md").read_text()
options = ClaudeAgentOptions(system_prompt=f"You are a helpful agent.\n\n{skill}", max_turns=6)

async def main():
    async for message in query(prompt="Hello!", options=options):
        print(message)

# In a notebook or async code: await main()
asyncio.run(main())

This gets SKILL.md only. The skill's 3 other files are not included.

Other ways to add it

Claude Agent SDK docs

agent_config() hands your agent the skill. With no DecimalAI key it reads your project's files and sends nothing. Needs SDK 0.27 or newer.

Install

pip install "decimalai[openai-agents]"
decimalai skills add tech-leads-club-frontend-blueprint

Add it to your agent

from agents import Agent, Runner
from decimalai.openai_agents import agent_config

# With no DECIMAL_API_KEY this reads the skills your project lists, from disk.
support = agent_config("support", fallback="You are a helpful agent.")

agent = Agent(
    name=support.name,
    instructions=support.instructions,  # your prompt, then the skill list
    tools=[*support.tools],             # your tools, then load_skill
)
# In a notebook or async code: result = await Runner.run(agent, "Hello!")
result = Runner.run_sync(agent, "Hello!")

Using SandboxAgent? capabilities=[Shell(), decimalai.openai_agents.sandbox_skills()] points its own loader at the same folder.

Install

pip install "decimalai[openai-agents]"

Add it to your agent

from decimalai import skillpkg

# Writes .agents/skills and .decimal/skills.toml. Safe to run twice.
result = skillpkg.add("tech-leads-club-frontend-blueprint")
if result.exit_code:
    raise SystemExit(result.problems)

from agents import Agent, Runner
from decimalai.openai_agents import agent_config

# With no DECIMAL_API_KEY this reads the skills your project lists, from disk.
support = agent_config("support", fallback="You are a helpful agent.")

agent = Agent(
    name=support.name,
    instructions=support.instructions,  # your prompt, then the skill list
    tools=[*support.tools],             # your tools, then load_skill
)
# In a notebook or async code: result = await Runner.run(agent, "Hello!")
result = Runner.run_sync(agent, "Hello!")

Using SandboxAgent? capabilities=[Shell(), decimalai.openai_agents.sandbox_skills()] points its own loader at the same folder.

No DecimalAI package. The whole skill goes in every prompt, and nothing pins or updates it.

Copy SKILL.md

Save it in your project, as

.agents/skills/tech-leads-club-frontend-blueprint/SKILL.md

Give it to your agent

from pathlib import Path
from agents import Agent, Runner

skill = Path(".agents/skills/tech-leads-club-frontend-blueprint/SKILL.md").read_text()
agent = Agent(name="support", instructions=f"You are a helpful agent.\n\n{skill}")
# In a notebook or async code: result = await Runner.run(agent, "Hello!")
result = Runner.run_sync(agent, "Hello!")

This gets SKILL.md only. The skill's 3 other files are not included.

Other ways to add it

OpenAI Agents docs

agent_config() hands your agent the skill. With no DecimalAI key it reads your project's files and sends nothing. Needs SDK 0.27 or newer.

Install

pip install "decimalai[openai]"
decimalai skills add tech-leads-club-frontend-blueprint

Add it to your agent

import json

from openai import OpenAI
from decimalai.openai import agent_config

client = OpenAI()
# With no DECIMAL_API_KEY this reads the skills your project lists, from disk.
support = agent_config("support", fallback="You are a helpful agent.")


def lookup_order(order_id: str) -> str:
    return f"Order {order_id} shipped yesterday."


# Your tools, as Chat Completions takes them, and what answers each.
TOOLS = [{"type": "function", "function": {
    "name": "lookup_order",
    "description": "Look up the status of an order.",
    "parameters": {"type": "object", "properties": {"order_id": {"type": "string"}},
                   "required": ["order_id"]},
}}]
FUNCTIONS = {"lookup_order": lookup_order}

question = "Where is order A1001?"
with support.run(question) as run:  # one user message, one run
    # run.system is your prompt, then the skill list.
    messages = [{"role": "system", "content": run.system}, run.message]
    while True:
        reply = client.chat.completions.create(
            model="gpt-5.4-mini",
            messages=messages,
            tools=[*TOOLS, *run.tools],  # your tools, then load_skill
        ).choices[0].message
        messages.append(reply)
        if not reply.tool_calls:
            break
        for call in reply.tool_calls:
            # load_skill is answered by the run; your own tools by FUNCTIONS.
            function = FUNCTIONS.get(call.function.name)
            messages.append(run.tool_result(call) or {
                "role": "tool", "tool_call_id": call.id,
                "content": function(**json.loads(call.function.arguments)) if function
                else f"There is no tool named {call.function.name!r}.",
            })
print(reply.content)

# The Responses API takes run.response_tools instead of run.tools.

Install

pip install "decimalai[openai]"

Add it to your agent

from decimalai import skillpkg

# Writes .agents/skills and .decimal/skills.toml. Safe to run twice.
result = skillpkg.add("tech-leads-club-frontend-blueprint")
if result.exit_code:
    raise SystemExit(result.problems)

import json

from openai import OpenAI
from decimalai.openai import agent_config

client = OpenAI()
# With no DECIMAL_API_KEY this reads the skills your project lists, from disk.
support = agent_config("support", fallback="You are a helpful agent.")


def lookup_order(order_id: str) -> str:
    return f"Order {order_id} shipped yesterday."


# Your tools, as Chat Completions takes them, and what answers each.
TOOLS = [{"type": "function", "function": {
    "name": "lookup_order",
    "description": "Look up the status of an order.",
    "parameters": {"type": "object", "properties": {"order_id": {"type": "string"}},
                   "required": ["order_id"]},
}}]
FUNCTIONS = {"lookup_order": lookup_order}

question = "Where is order A1001?"
with support.run(question) as run:  # one user message, one run
    # run.system is your prompt, then the skill list.
    messages = [{"role": "system", "content": run.system}, run.message]
    while True:
        reply = client.chat.completions.create(
            model="gpt-5.4-mini",
            messages=messages,
            tools=[*TOOLS, *run.tools],  # your tools, then load_skill
        ).choices[0].message
        messages.append(reply)
        if not reply.tool_calls:
            break
        for call in reply.tool_calls:
            # load_skill is answered by the run; your own tools by FUNCTIONS.
            function = FUNCTIONS.get(call.function.name)
            messages.append(run.tool_result(call) or {
                "role": "tool", "tool_call_id": call.id,
                "content": function(**json.loads(call.function.arguments)) if function
                else f"There is no tool named {call.function.name!r}.",
            })
print(reply.content)

# The Responses API takes run.response_tools instead of run.tools.

No DecimalAI package. The whole skill goes in every prompt, and nothing pins or updates it.

Copy SKILL.md

Save it in your project, as

.agents/skills/tech-leads-club-frontend-blueprint/SKILL.md

Give it to your agent

from pathlib import Path
from openai import OpenAI

client = OpenAI()
skill = Path(".agents/skills/tech-leads-club-frontend-blueprint/SKILL.md").read_text()
reply = client.chat.completions.create(
    model="gpt-5.4-mini",
    messages=[
        {"role": "system", "content": f"You are a helpful agent.\n\n{skill}"},
        {"role": "user", "content": "Hello!"},
    ],
).choices[0].message

This gets SKILL.md only. The skill's 3 other files are not included.

Other ways to add it

OpenAI SDK docs

agent_config() hands your agent the skill. With no DecimalAI key it reads your project's files and sends nothing. Needs SDK 0.27 or newer.

Install

pip install "decimalai[anthropic]"
decimalai skills add tech-leads-club-frontend-blueprint

Add it to your agent

import anthropic
from decimalai.anthropic import agent_config

client = anthropic.Anthropic()
# With no DECIMAL_API_KEY this reads the skills your project lists, from disk.
support = agent_config("support", fallback="You are a helpful agent.")

question = "Hello!"
with support.run(question) as run:  # one user message, one run
    answer = client.beta.messages.tool_runner(
        model="claude-haiku-5-5",
        max_tokens=4096,
        system=run.system,     # your prompt, then the skill list
        tools=[*run.tools],    # your tools, then load_skill
        messages=[{"role": "user", "content": question}],
    ).until_done()

Install

pip install "decimalai[anthropic]"

Add it to your agent

from decimalai import skillpkg

# Writes .agents/skills and .decimal/skills.toml. Safe to run twice.
result = skillpkg.add("tech-leads-club-frontend-blueprint")
if result.exit_code:
    raise SystemExit(result.problems)

import anthropic
from decimalai.anthropic import agent_config

client = anthropic.Anthropic()
# With no DECIMAL_API_KEY this reads the skills your project lists, from disk.
support = agent_config("support", fallback="You are a helpful agent.")

question = "Hello!"
with support.run(question) as run:  # one user message, one run
    answer = client.beta.messages.tool_runner(
        model="claude-haiku-5-5",
        max_tokens=4096,
        system=run.system,     # your prompt, then the skill list
        tools=[*run.tools],    # your tools, then load_skill
        messages=[{"role": "user", "content": question}],
    ).until_done()

No DecimalAI package. The whole skill goes in every prompt, and nothing pins or updates it.

Copy SKILL.md

Save it in your project, as

.agents/skills/tech-leads-club-frontend-blueprint/SKILL.md

Give it to your agent

from pathlib import Path
import anthropic

client = anthropic.Anthropic()
skill = Path(".agents/skills/tech-leads-club-frontend-blueprint/SKILL.md").read_text()
reply = client.messages.create(
    model="claude-haiku-5-5",
    max_tokens=4096,
    system=f"You are a helpful agent.\n\n{skill}",
    messages=[{"role": "user", "content": "Hello!"}],
)

This gets SKILL.md only. The skill's 3 other files are not included.

Other ways to add it

Anthropic docs

agent_config() hands your agent the skill. With no DecimalAI key it reads your project's files and sends nothing. Needs SDK 0.27 or newer.

Install

pip install "decimalai[google-genai]"
decimalai skills add tech-leads-club-frontend-blueprint

Add it to your agent

from google import genai
from google.genai import types
from decimalai.google_genai import agent_config

client = genai.Client()
# With no DECIMAL_API_KEY this reads the skills your project lists, from disk.
support = agent_config("support", fallback="You are a helpful agent.")


def lookup_order(order_id: str) -> str:
    return f"Order {order_id} shipped yesterday."


# Your functions, as declarations for the model, and what answers each.
TOOLS = [{"function_declarations": [{
    "name": "lookup_order",
    "description": "Look up the status of an order.",
    "parameters_json_schema": {"type": "object", "properties": {"order_id": {"type": "string"}},
                               "required": ["order_id"]},
}]}]
FUNCTIONS = {"lookup_order": lookup_order}

question = "Where is order A1001?"
with support.run(question) as run:  # one user message, one run
    config = types.GenerateContentConfig(
        system_instruction=run.system,     # your prompt, then the skill list
        tools=[*TOOLS, *run.tool_params],  # your functions, then load_skill
    )
    contents = [{"role": "user", "parts": [{"text": run.message}]}]
    while True:
        response = client.models.generate_content(
            model="gemini-3.5-flash", contents=contents, config=config,
        )
        if not response.function_calls:
            break
        contents.append(response.candidates[0].content)
        parts = []
        for call in response.function_calls:
            # load_skill is answered by the run; your own functions by FUNCTIONS.
            # A loop of your own rather than automatic function calling, which
            # raises KeyError when the model asks for a function you did not pass.
            function = FUNCTIONS.get(call.name)
            parts.append(run.tool_result(call) or {"function_response": {
                "name": call.name, "id": call.id,
                "response": {"result": function(**(call.args or {})) if function
                             else f"There is no function named {call.name!r}."},
            }})
        contents.append({"role": "user", "parts": parts})
print(response.text)

Install

pip install "decimalai[google-genai]"

Add it to your agent

from decimalai import skillpkg

# Writes .agents/skills and .decimal/skills.toml. Safe to run twice.
result = skillpkg.add("tech-leads-club-frontend-blueprint")
if result.exit_code:
    raise SystemExit(result.problems)

from google import genai
from google.genai import types
from decimalai.google_genai import agent_config

client = genai.Client()
# With no DECIMAL_API_KEY this reads the skills your project lists, from disk.
support = agent_config("support", fallback="You are a helpful agent.")


def lookup_order(order_id: str) -> str:
    return f"Order {order_id} shipped yesterday."


# Your functions, as declarations for the model, and what answers each.
TOOLS = [{"function_declarations": [{
    "name": "lookup_order",
    "description": "Look up the status of an order.",
    "parameters_json_schema": {"type": "object", "properties": {"order_id": {"type": "string"}},
                               "required": ["order_id"]},
}]}]
FUNCTIONS = {"lookup_order": lookup_order}

question = "Where is order A1001?"
with support.run(question) as run:  # one user message, one run
    config = types.GenerateContentConfig(
        system_instruction=run.system,     # your prompt, then the skill list
        tools=[*TOOLS, *run.tool_params],  # your functions, then load_skill
    )
    contents = [{"role": "user", "parts": [{"text": run.message}]}]
    while True:
        response = client.models.generate_content(
            model="gemini-3.5-flash", contents=contents, config=config,
        )
        if not response.function_calls:
            break
        contents.append(response.candidates[0].content)
        parts = []
        for call in response.function_calls:
            # load_skill is answered by the run; your own functions by FUNCTIONS.
            # A loop of your own rather than automatic function calling, which
            # raises KeyError when the model asks for a function you did not pass.
            function = FUNCTIONS.get(call.name)
            parts.append(run.tool_result(call) or {"function_response": {
                "name": call.name, "id": call.id,
                "response": {"result": function(**(call.args or {})) if function
                             else f"There is no function named {call.name!r}."},
            }})
        contents.append({"role": "user", "parts": parts})
print(response.text)

No DecimalAI package. The whole skill goes in every prompt, and nothing pins or updates it.

Copy SKILL.md

Save it in your project, as

.agents/skills/tech-leads-club-frontend-blueprint/SKILL.md

Give it to your agent

from pathlib import Path
from google import genai
from google.genai import types

client = genai.Client()
skill = Path(".agents/skills/tech-leads-club-frontend-blueprint/SKILL.md").read_text()
response = client.models.generate_content(
    model="gemini-3.5-flash",
    contents="Hello!",
    config=types.GenerateContentConfig(system_instruction=f"You are a helpful agent.\n\n{skill}"),
)

This gets SKILL.md only. The skill's 3 other files are not included.

Other ways to add it

Gemini API docs

agent_config() hands your agent the skill. With no DecimalAI key it reads your project's files and sends nothing. Needs SDK 0.27 or newer.

Install

pip install "decimalai[langchain]" langchain-openai
decimalai skills add tech-leads-club-frontend-blueprint

Add it to your agent

from langchain.agents import create_agent
from decimalai.langchain import agent_config

# With no DECIMAL_API_KEY this reads the skills your project lists, from disk.
support = agent_config("support", fallback="You are a helpful agent.")

agent = create_agent(
    "openai:gpt-5.4-mini",
    tools=[],                         # your tools; the middleware adds load_skill
    middleware=[support.middleware],  # your prompt, the skill list and load_skill
)
result = agent.invoke({"messages": [{"role": "user", "content": "Hello!"}]})

Install

pip install "decimalai[langchain]" langchain-openai

Add it to your agent

from decimalai import skillpkg

# Writes .agents/skills and .decimal/skills.toml. Safe to run twice.
result = skillpkg.add("tech-leads-club-frontend-blueprint")
if result.exit_code:
    raise SystemExit(result.problems)

from langchain.agents import create_agent
from decimalai.langchain import agent_config

# With no DECIMAL_API_KEY this reads the skills your project lists, from disk.
support = agent_config("support", fallback="You are a helpful agent.")

agent = create_agent(
    "openai:gpt-5.4-mini",
    tools=[],                         # your tools; the middleware adds load_skill
    middleware=[support.middleware],  # your prompt, the skill list and load_skill
)
result = agent.invoke({"messages": [{"role": "user", "content": "Hello!"}]})

No DecimalAI package. The whole skill goes in every prompt, and nothing pins or updates it.

Copy SKILL.md

Save it in your project, as

.agents/skills/tech-leads-club-frontend-blueprint/SKILL.md

Give it to your agent

from pathlib import Path
from langchain.agents import create_agent

skill = Path(".agents/skills/tech-leads-club-frontend-blueprint/SKILL.md").read_text()
agent = create_agent("openai:gpt-5.4-mini", tools=[], system_prompt=f"You are a helpful agent.\n\n{skill}")
result = agent.invoke({"messages": [{"role": "user", "content": "Hello!"}]})

This gets SKILL.md only. The skill's 3 other files are not included.

Other ways to add it

LangChain docs

CrewAI's own skill loader reads the installed folder. No DecimalAI account needed.

Install

pip install "decimalai>=0.16" "crewai>=1.15.27"
decimalai skills add tech-leads-club-frontend-blueprint

Add it to your agent

import decimalai.crewai
from crewai import Agent, Crew, Task

agent = Agent(
    role="Support", goal="Help the customer", backstory="A support agent.",
    llm=llm,                               # your own CrewAI LLM
    skills=decimalai.crewai.skills(),      # the installed folder
    tools=decimalai.crewai.skill_tools(),  # reads a skill's files, runs its scripts
)
task = Task(description="Hello!", expected_output="an answer", agent=agent)
Crew(agents=[agent], tasks=[task]).kickoff()

The same install from Python, for a notebook or a setup script. CrewAI's own skill loader reads the installed folder. No DecimalAI account needed.

Install

pip install "decimalai>=0.16" "crewai>=1.15.27"

Add it to your agent

from decimalai import skillpkg

# Writes .agents/skills and .decimal/skills.toml. Safe to run twice.
result = skillpkg.add("tech-leads-club-frontend-blueprint")
if result.exit_code:
    raise SystemExit(result.problems)

import decimalai.crewai
from crewai import Agent, Crew, Task

agent = Agent(
    role="Support", goal="Help the customer", backstory="A support agent.",
    llm=llm,                               # your own CrewAI LLM
    skills=decimalai.crewai.skills(),      # the installed folder
    tools=decimalai.crewai.skill_tools(),  # reads a skill's files, runs its scripts
)
task = Task(description="Hello!", expected_output="an answer", agent=agent)
Crew(agents=[agent], tasks=[task]).kickoff()

No DecimalAI package. CrewAI's own loader reads the folder, and nothing pins or updates it.

Copy SKILL.md

Save it in your project, as

.agents/skills/tech-leads-club-frontend-blueprint/SKILL.md

Give it to your agent

from pathlib import Path
from crewai import Agent, Crew, Task

agent = Agent(
    role="Support", goal="Help the customer", backstory="A support agent.",
    llm=llm,                         # your own CrewAI LLM
    skills=[Path(".agents/skills")],
)
task = Task(description="Hello!", expected_output="an answer", agent=agent)
Crew(agents=[agent], tasks=[task]).kickoff()

This gets SKILL.md only. The skill's 3 other files are not included.

Other ways to add it

CrewAI docs

agent_config() hands your agent the skill. With no DecimalAI key it reads your project's files and sends nothing. Needs SDK 0.27 or newer.

Install

pip install "decimalai[adk]"
decimalai skills add tech-leads-club-frontend-blueprint

Add it to your agent

from decimalai.adk import DecimalAIPlugin, agent_config
from google.adk.agents import LlmAgent
from google.adk.apps import App

# With no DECIMAL_API_KEY this reads the skills your project lists, from disk.
support = agent_config("support", fallback="You are a helpful agent.")

agent = LlmAgent(
    name="support",          # ADK needs a Python identifier
    model="gemini-3.5-flash",
    instruction=support.instruction,  # your prompt, then the skill list
    tools=[*support.tools],           # your tools, then load_skill
)
# DecimalAIPlugin makes each invocation of runners built from this App one trace.
app = App(name="support", root_agent=agent, plugins=[DecimalAIPlugin()])

Prefer ADK's own loader? SkillToolset(skills=decimalai.adk.skills(), ...) reads the same folder. Use one or the other: a skill delivered both ways reaches the prompt twice.

Install

pip install "decimalai[adk]"

Add it to your agent

from decimalai import skillpkg

# Writes .agents/skills and .decimal/skills.toml. Safe to run twice.
result = skillpkg.add("tech-leads-club-frontend-blueprint")
if result.exit_code:
    raise SystemExit(result.problems)

from decimalai.adk import DecimalAIPlugin, agent_config
from google.adk.agents import LlmAgent
from google.adk.apps import App

# With no DECIMAL_API_KEY this reads the skills your project lists, from disk.
support = agent_config("support", fallback="You are a helpful agent.")

agent = LlmAgent(
    name="support",          # ADK needs a Python identifier
    model="gemini-3.5-flash",
    instruction=support.instruction,  # your prompt, then the skill list
    tools=[*support.tools],           # your tools, then load_skill
)
# DecimalAIPlugin makes each invocation of runners built from this App one trace.
app = App(name="support", root_agent=agent, plugins=[DecimalAIPlugin()])

Prefer ADK's own loader? SkillToolset(skills=decimalai.adk.skills(), ...) reads the same folder. Use one or the other: a skill delivered both ways reaches the prompt twice.

No DecimalAI package. The whole skill goes in every prompt, and nothing pins or updates it.

Copy SKILL.md

Save it in your project, as

.agents/skills/tech-leads-club-frontend-blueprint/SKILL.md

Give it to your agent

from pathlib import Path
from google.adk.agents import LlmAgent

skill = Path(".agents/skills/tech-leads-club-frontend-blueprint/SKILL.md").read_text()
agent = LlmAgent(
    name="support",
    model="gemini-3.5-flash",
    instruction=lambda context: f"You are a helpful agent.\n\n{skill}",
)

This gets SKILL.md only. The skill's 3 other files are not included.

Other ways to add it

Google ADK docs

agent_config() hands your agent the skill. With no DecimalAI key it reads your project's files and sends nothing. Needs SDK 0.27 or newer.

Install

pip install "decimalai[pydantic-ai]"
decimalai skills add tech-leads-club-frontend-blueprint

Add it to your agent

from pydantic_ai import Agent
from decimalai.pydantic_ai import agent_config

# With no DECIMAL_API_KEY this reads the skills your project lists, from disk.
support = agent_config("support", fallback="You are a helpful agent.")

agent = Agent(
    "openai:gpt-4o-mini",
    name=support.name,
    tools=[],                 # your tools; the capability adds load_skill
    capabilities=[support],   # your prompt, the skill list and load_skill
)
# In a notebook or async code: result = await agent.run("Hello!")
result = agent.run_sync("Hello!")

On the Pydantic AI harness, decimalai.pydantic_ai_harness.skills(project) uses its own loader instead.

Install

pip install "decimalai[pydantic-ai]"

Add it to your agent

from decimalai import skillpkg

# Writes .agents/skills and .decimal/skills.toml. Safe to run twice.
result = skillpkg.add("tech-leads-club-frontend-blueprint")
if result.exit_code:
    raise SystemExit(result.problems)

from pydantic_ai import Agent
from decimalai.pydantic_ai import agent_config

# With no DECIMAL_API_KEY this reads the skills your project lists, from disk.
support = agent_config("support", fallback="You are a helpful agent.")

agent = Agent(
    "openai:gpt-4o-mini",
    name=support.name,
    tools=[],                 # your tools; the capability adds load_skill
    capabilities=[support],   # your prompt, the skill list and load_skill
)
# In a notebook or async code: result = await agent.run("Hello!")
result = agent.run_sync("Hello!")

On the Pydantic AI harness, decimalai.pydantic_ai_harness.skills(project) uses its own loader instead.

No DecimalAI package. The whole skill goes in every prompt, and nothing pins or updates it.

Copy SKILL.md

Save it in your project, as

.agents/skills/tech-leads-club-frontend-blueprint/SKILL.md

Give it to your agent

from pathlib import Path
from pydantic_ai import Agent

skill = Path(".agents/skills/tech-leads-club-frontend-blueprint/SKILL.md").read_text()
agent = Agent("openai:gpt-4o-mini", instructions=f"You are a helpful agent.\n\n{skill}")
# In a notebook or async code: result = await agent.run("Hello!")
result = agent.run_sync("Hello!")

This gets SKILL.md only. The skill's 3 other files are not included.

Other ways to add it

Pydantic AI docs

Deep Agents' own skill loader reads the installed folder. No DecimalAI account needed.

Install

pip install "decimalai>=0.16" deepagents
decimalai skills add tech-leads-club-frontend-blueprint

Add it to your agent

import decimalai.deepagents
from deepagents import create_deep_agent

agent = create_deep_agent(model=model, **decimalai.deepagents.skills())
agent.invoke({"messages": [{"role": "user", "content": "Hello!"}]})

The default backend reads files but has no shell. To run a skill's scripts, pass skills(backend=LocalShellBackend(...)).

The same install from Python, for a notebook or a setup script. Deep Agents' own skill loader reads the installed folder. No DecimalAI account needed.

Install

pip install "decimalai>=0.16" deepagents

Add it to your agent

from decimalai import skillpkg

# Writes .agents/skills and .decimal/skills.toml. Safe to run twice.
result = skillpkg.add("tech-leads-club-frontend-blueprint")
if result.exit_code:
    raise SystemExit(result.problems)

import decimalai.deepagents
from deepagents import create_deep_agent

agent = create_deep_agent(model=model, **decimalai.deepagents.skills())
agent.invoke({"messages": [{"role": "user", "content": "Hello!"}]})

The default backend reads files but has no shell. To run a skill's scripts, pass skills(backend=LocalShellBackend(...)).

No DecimalAI package. The whole skill goes in every prompt, and nothing pins or updates it.

Copy SKILL.md

Save it in your project, as

.agents/skills/tech-leads-club-frontend-blueprint/SKILL.md

Give it to your agent

from pathlib import Path
from deepagents import create_deep_agent

skill = Path(".agents/skills/tech-leads-club-frontend-blueprint/SKILL.md").read_text()
agent = create_deep_agent(model=model, system_prompt=f"You are a helpful agent.\n\n{skill}")
agent.invoke({"messages": [{"role": "user", "content": "Hello!"}]})

This gets SKILL.md only. The skill's 3 other files are not included.

Other ways to add it

Deep Agents docs

Its own skill loader reads the installed folder. No DecimalAI account needed.

Install

pip install "decimalai>=0.16" agent-framework
decimalai skills add tech-leads-club-frontend-blueprint

Add it to your agent

import asyncio

from agent_framework import Agent
from decimalai.agent_framework import skills

agent = Agent(client=client, instructions="You are a helpful agent.", context_providers=[skills()])
asyncio.run(agent.run("Hello!"))

It caches skills by default, so restart the process after decimalai skills update.

The same install from Python, for a notebook or a setup script. Its own skill loader reads the installed folder. No DecimalAI account needed.

Install

pip install "decimalai>=0.16" agent-framework

Add it to your agent

from decimalai import skillpkg

# Writes .agents/skills and .decimal/skills.toml. Safe to run twice.
result = skillpkg.add("tech-leads-club-frontend-blueprint")
if result.exit_code:
    raise SystemExit(result.problems)

import asyncio

from agent_framework import Agent
from decimalai.agent_framework import skills

agent = Agent(client=client, instructions="You are a helpful agent.", context_providers=[skills()])
asyncio.run(agent.run("Hello!"))

It caches skills by default, so restart the process after decimalai skills update.

No DecimalAI package. The whole skill goes in every prompt, and nothing pins or updates it.

Copy SKILL.md

Save it in your project, as

.agents/skills/tech-leads-club-frontend-blueprint/SKILL.md

Give it to your agent

import asyncio
from pathlib import Path
from agent_framework import Agent

skill = Path(".agents/skills/tech-leads-club-frontend-blueprint/SKILL.md").read_text()
agent = Agent(client=client, instructions=f"You are a helpful agent.\n\n{skill}")
asyncio.run(agent.run("Hello!"))

This gets SKILL.md only. The skill's 3 other files are not included.

Other ways to add it

Microsoft Agent Framework docs

Strands' own skill loader reads the installed folder. No DecimalAI account needed.

Install

pip install "decimalai>=0.16" strands-agents
decimalai skills add tech-leads-club-frontend-blueprint

Add it to your agent

from decimalai.strands import skills
from strands import Agent
from strands.vended_tools import file_editor, shell

agent = Agent(
    model=model,                # always pass one: the default is Amazon Bedrock
    system_prompt="You are a helpful agent.",
    tools=[file_editor, shell],
    plugins=[skills()],
)
agent("Hello!")

Strands loads an agent's skills once, so build the agent again after decimalai skills update.

The same install from Python, for a notebook or a setup script. Strands' own skill loader reads the installed folder. No DecimalAI account needed.

Install

pip install "decimalai>=0.16" strands-agents

Add it to your agent

from decimalai import skillpkg

# Writes .agents/skills and .decimal/skills.toml. Safe to run twice.
result = skillpkg.add("tech-leads-club-frontend-blueprint")
if result.exit_code:
    raise SystemExit(result.problems)

from decimalai.strands import skills
from strands import Agent
from strands.vended_tools import file_editor, shell

agent = Agent(
    model=model,                # always pass one: the default is Amazon Bedrock
    system_prompt="You are a helpful agent.",
    tools=[file_editor, shell],
    plugins=[skills()],
)
agent("Hello!")

Strands loads an agent's skills once, so build the agent again after decimalai skills update.

No DecimalAI package. The whole skill goes in every prompt, and nothing pins or updates it.

Copy SKILL.md

Save it in your project, as

.agents/skills/tech-leads-club-frontend-blueprint/SKILL.md

Give it to your agent

from pathlib import Path
from strands import Agent

skill = Path(".agents/skills/tech-leads-club-frontend-blueprint/SKILL.md").read_text()
agent = Agent(model=model, system_prompt=f"You are a helpful agent.\n\n{skill}")
agent("Hello!")

This gets SKILL.md only. The skill's 3 other files are not included.

Other ways to add it

Strands docs

Adds every file the skill has, pinned so you can update it. Cursor, Copilot, Cline and Warp read this folder by themselves.

pip install "decimalai>=0.15"
decimalai skills add tech-leads-club-frontend-blueprint

No Python or account. Cursor, Copilot, Cline and Warp read this folder by themselves.

Save it into your project

curl -fsSL --create-dirs -o .agents/skills/tech-leads-club-frontend-blueprint/SKILL.md https://app.decimal.ai/s/tech-leads-club-frontend-blueprint/SKILL.md

Copy SKILL.md

Save it in your project, as

.agents/skills/tech-leads-club-frontend-blueprint/SKILL.md

This gets SKILL.md only. The skill's 3 other files are not included.

Other ways to add it

Cursor and other editors docs

Fetch the file and give its text to your model as instructions. No account or package needed.

Get the file

curl -fsSL https://app.decimal.ai/s/tech-leads-club-frontend-blueprint/SKILL.md

Read the summary as JSON

curl -fsSL https://app.decimal.ai/s/tech-leads-club-frontend-blueprint.json

This gets SKILL.md only. The skill's 3 other files are not included.

Other ways to add it

Other setups docs

You don't need a DecimalAI account.

Version: v1, tested 8/9/2026
Source: tech-leads-club/agent-skills ↗
License: NOASSERTION

Manage it in DecimalAI

Saved prompts and skills, pinned versions, and traces of this skill in your runs. DecimalAI does not run your agent.

Claude Code reads files from your project, so DecimalAI config does not apply there.

On Claude Agent SDK: save the skill to an agent here, set DECIMAL_API_KEY, and the same code uses it with no command to run. Changes you save reach the next run with no redeploy.

On OpenAI Agents: save the skill to an agent here, set DECIMAL_API_KEY, and the same code uses it with no command to run. Changes you save reach the next run with no redeploy.

On OpenAI SDK: save the skill to an agent here, set DECIMAL_API_KEY, and the same code uses it with no command to run. Changes you save reach the next run with no redeploy.

On Anthropic: save the skill to an agent here, set DECIMAL_API_KEY, and the same code uses it with no command to run. Changes you save reach the next run with no redeploy.

On Gemini API: save the skill to an agent here, set DECIMAL_API_KEY, and the same code uses it with no command to run. Changes you save reach the next run with no redeploy.

On LangChain: save the skill to an agent here, set DECIMAL_API_KEY, and the same code uses it with no command to run. Changes you save reach the next run with no redeploy.

On CrewAI: set DECIMAL_API_KEY and add decimalai.init(crewai=True) to record runs and skill use. The skill version stays in your repo.

On Google ADK: save the skill to an agent here, set DECIMAL_API_KEY, and the same code uses it with no command to run. Changes you save reach the next run with no redeploy.

On Pydantic AI: save the skill to an agent here, set DECIMAL_API_KEY, and the same code uses it with no command to run. Changes you save reach the next run with no redeploy.

On Deep Agents: set DECIMAL_API_KEY and add decimalai.init(langchain=True) to record runs and skill use. The skill version stays in your repo.

On Microsoft Agent Framework: set DECIMAL_API_KEY and add decimalai.init(otel=True, agent_name="support") to record runs and skill use. The skill version stays in your repo.

On Strands: set DECIMAL_API_KEY and add decimalai.init(otel=True, agent_name="support") to record runs and skill use. The skill version stays in your repo.

Editors read files from your project, so DecimalAI config does not apply there.

Anywhere else: record a use with decimalai.log_skill_activation() inside a trace.

Use this skill

SKILL.md

Frontend Blueprint

You are a senior frontend design consultant — not a code generator. Your job is to deeply understand what the user wants before writing a single line of code. You ask the right questions, collect references, challenge vague requests, suggest improvements, and only generate code when you have enough context to be accurate on the first attempt.

Your target user is a fullstack developer who knows the basics of UI but is not a design specialist. You bridge the gap between "I know what I want but can't articulate it" and "pixel-perfect implementation".

Core Principles

Never generate code without context. If the user says "build me a landing page" with no references, your first response is ALWAYS questions and reference requests — never code. A wrong first draft wastes more time than 2 minutes of discovery.
References are non-negotiable. Always ask for visual references before starting. The user may not know the right words, but they know what they like when they see it. Screenshots, URLs, Dribbble links, Figma exports, even "something like Apple's website" — anything concrete beats abstract descriptions.
Atomic delivery. Break every project into the smallest meaningful units. Deliver one piece, get approval, move to the next. Never generate a full page in one shot — it guarantees rework.
Opinionated guidance. You are NOT a passive executor. When the user's choices conflict with good design practices, say so. Suggest alternatives. Explain WHY. But ultimately respect their decision after informing them.
Fidelity over speed. The goal is to match the user's vision exactly, not to ship fast. Every token spent on discovery saves 10x in rework.

Workflow

Every project follows this sequence. Do NOT skip phases. If the user tries to jump ahead, explain briefly why the current phase matters and proceed.

BRIEFING → REFERENCES → DESIGN DIRECTION → [STITCH PROTOTYPING] → EXECUTION PLAN → ATOMIC BUILD → REVIEW

The Stitch Prototyping phase (in brackets) is conditional — triggered when the user has no existing mockups or needs visual validation before code. See Phase 4 for details.

Phase 1: Briefing

Goal: Understand WHAT the user needs and WHY.

Ask conversationally (not as a checklist dump). Adapt based on project complexity — a simple button needs 2 questions, a full app needs more.

Key areas to cover:

What are you building? (page, component, app, redesign, etc.)
Who is the end user? (audience, demographics, context of use)
What problem does this solve? (not just "looks nice" — the actual goal)
Technical constraints? (framework, existing design system, browser support, responsive requirements)
Existing assets? (brand guidelines, color palette, logos, fonts already in use)
Deadline or scope? (MVP vs polished, how much time to invest)

IMPORTANT: For simple requests (a single component, a small tweak), compress this to 1-2 targeted questions. Don't over-process small tasks. Scale your discovery to the project size.

Phase 2: Reference Collection

Goal: Build a concrete visual vocabulary BEFORE any design decisions.

This is the most critical phase. Request references across these dimensions:

Must collect (always ask):

Visual references: "Share 2-3 screenshots, URLs, or images of designs you like. They don't need to be the same type of project — if you like the typography of site A and the layout of site B, share both and tell me what you like about each."
What specifically they like in each reference: colors? layout? typography? spacing? animations? overall mood?

Collect when relevant (ask based on project scope):

Typography preferences: serif vs sans-serif, bold vs light, specific font names if they have preferences
Icon style: outlined, filled, duotone, hand-drawn, geometric, a specific library (Lucide, Phosphor, Heroicons, etc.)
Color direction: dark/light theme, warm/cool tones, specific brand colors, accent color preferences
Imagery style: photography, illustrations, gradients, abstract, minimal
Motion/animation: subtle micro-interactions, dramatic transitions, none
Layout preferences: dense/spacious, symmetric/asymmetric, grid-based/organic

How to handle "I don't know" responses: When the user can't provide references or is unsure, DON'T proceed blindly. Instead:

Offer 2-3 contrasting directions with concrete descriptions
Use well-known sites as anchors: "More like Stripe (clean, spacious) or more like Bloomberg (dense, data-rich)?"
Ask elimination questions: "What do you definitely NOT want?"
If building for a known brand, research their existing visual identity

CRITICAL: Do not proceed to Phase 3 until you have at least ONE concrete visual reference or a clearly articulated direction confirmed by the user.

Stitch as a discovery tool: If the user has no visual references AND is not using Figma/Sketch/Adobe XD or similar design tools, suggest Google Stitch (stitch.withgoogle.com) as a rapid prototyping tool. Frame it as a time-saver: "Before we write code, I can generate prompts for Google Stitch to quickly visualize what we're building. You'll see the actual design in seconds and we avoid rework. Want to try it?" If the user is interested, read references/stitch-integration.md and proceed to Phase 4 (Stitch Prototyping) after Phase 3. If the user has Stitch MCP connected, you can generate designs directly.

Phase 3: Design Direction

Goal: Synthesize references into a clear, agreed-upon direction.

Before writing code, present a Design Direction Summary:

## Design Direction

**Mood:** [describe in 2-3 words — e.g., "clean and editorial"]
**Color palette:** [primary, secondary, accent, neutrals — hex codes]
**Typography:**
  - Headings: [font name, weight, style rationale]
  - Body: [font name, weight, style rationale]
**Layout approach:** [describe — e.g., "generous whitespace, card-based, 12-col grid"]
**Icon style:** [library + style]
**Key references applied:**
  - From [ref A]: [what you're taking — e.g., "the spacing rhythm and card design"]
  - From [ref B]: [what you're taking — e.g., "the color temperature and typography pairing"]
**Intentional departures:**
  - [anything you're suggesting differently from refs, and WHY]

Wait for explicit approval or adjustments before proceeding.

This is also where you provide expert opinions: if the user's references conflict, if their color choices have accessibility issues, if their font pairing doesn't work — say so now. Suggest improvements with clear reasoning.

Phase 4: Stitch Prototyping (Conditional)

Goal: Visualize the design BEFORE writing any code.

This phase activates when:

The user has no existing mockups (Figma, Sketch, etc.)
The user is uncertain about direction and wants to see options
The project has multiple screens or complex layouts
The user explicitly wants to prototype first

Read references/stitch-integration.md before executing this phase.

If Stitch MCP is connected (agent has access to Stitch tools):

Create a Stitch project: create_project(title: "Project Name")
Create a Design System from the approved Design Direction (Phase 3), mapping color palette → customColor/preset, typography → font, dark/light → colorMode, border radius → roundness
Generate the first screen using generate_screen_from_text with a prompt built from the Design Direction. Use the prompt templates in references/stitch-integration.md Section 4.
Present the generated screenshot to the user for review
If the user wants alternatives: use generate_variants with appropriate creativeRange and aspects
If the user wants edits: use edit_screens with targeted, specific prompts (one change at a time)
Apply the design system to all screens for consistency
Once all screens are approved, extract HTML via get_screen to use as a reference in the Atomic Build phase

If Stitch MCP is NOT connected (manual workflow):

Ask if the user wants to set up MCP (offer setup guidance from references/stitch-integration.md Section 3 — it covers the generic config pattern and API Key method)
If they prefer manual: generate ready-to-paste prompts following the Stitch prompt formula: Idea + Theme + Content + Image (optional)
Guide the user through the Stitch workflow:
- Paste the prompt at stitch.withgoogle.com
- Choose device type (Mobile for apps, Web for websites/dashboards)
- Generate, review, and share screenshots back
Generate targeted refinement prompts one at a time based on feedback
Suggest using Variants for comparison: "In Stitch, select the screen → Generate → Variants. Set Creative Range to Explore and generate 3 options."
Suggest using Edit Theme for quick adjustments: "Select the screen → Generate → Edit Theme to quickly tweak colors, font, dark mode, or corner radius."
Suggest creating a Prototype to test interactivity: "Select the screen → Generate → Prototype to see hover states and scroll behavior."
Once approved, user downloads HTML/images from Stitch for reference

Prompt generation rules:

Follow the exact formula: Idea + Theme + Content
Use UI/UX keywords: "navigation bar", "hero section", "card layout", "call-to-action button", "visual hierarchy", "drop shadow"
Set the vibe with adjectives from the Design Direction mood
Use the Style Word Bank for creative direction (Bento Grid, Editorial, Glassmorphism, Brutalist, Cyberpunk, etc.)
If the user's chosen font is not in Stitch's 29 supported fonts, pick the closest match and note the substitution
Keep prompts focused — one screen/section per generation
Refinement prompts: one major change at a time, be specific about WHAT to change and HOW

Exiting this phase: Proceed to Phase 5 when the user has approved visual designs for all key screens. These become the source of truth for code generation. If the user decides to skip Stitch at any point, proceed directly to Phase 5.

Phase 5: Execution Plan

Goal: Break the project into atomic, deliverable units.

Present a numbered list of components/sections to build, in dependency order:

## Execution Plan

I'll build this in [N] steps, each one reviewed before moving on:

1. **[Component/Section]** — [brief description, ~effort indicator]
2. **[Component/Section]** — [brief description]
3. **[Component/Section]** — [brief description]
...

Starting with #1. Ready?

Principles for the plan:

Each step should produce something visually reviewable
Dependencies first (design tokens/base styles → layout → components → details)
Group logically but keep steps small enough that rework affects only one piece
For large projects, suggest a phased approach (Phase A: core structure, Phase B: polish and animations, Phase C: responsive/edge cases)

Phase 6: Atomic Build

Goal: Generate code one unit at a time, validated at each step.

If Stitch Prototyping (Phase 4) was completed, use the approved Stitch screens as the primary visual reference. When Stitch MCP is available, retrieve the HTML code via get_screen and use it as a structural starting point — but always rewrite for the target framework, following the agreed Design Direction tokens and the project's CSS architecture. Stitch HTML is a reference, not copy-paste material.

For each unit in the execution plan:

Generate the code following the agreed design direction precisely
Explain your choices briefly — what you did and why (especially when you made subjective decisions)
Highlight decision points — anything that could go either way, present options: "I went with X here, but Y is also valid if you prefer Z"
Proactive suggestions — if you see an opportunity to improve beyond what was asked, suggest it: "This would look even better with a subtle hover animation — want me to add it?"

After presenting each unit, explicitly ask: "Does this match your vision? Any adjustments before I move to the next step?"

CRITICAL: If the user requests changes, apply them to the CURRENT unit before moving forward. Never accumulate "fix later" items.

Phase 7: Review & Polish

Goal: Final quality pass on the complete deliverable.

Once all units are approved individually:

Present the integrated result (all components together)
Check for visual consistency across components (spacing rhythm, color usage, typography hierarchy)
Suggest polish opportunities: micro-interactions, transitions, responsive refinements, accessibility improvements
Provide a final opinion as a consultant: what's strong, what could be better in a future iteration, what to watch out for

Reference Files

This skill includes deep-dive references. Load them ON DEMAND, not upfront:

references/design-principles.md — Read during Phase 3 (Design Direction) or Phase 6 (Atomic Build) when you need specific guidance on typography pairing, color systems, spacing, layout patterns, accessibility, animation, or icon selection. Contains detailed rules and tables for each area.
references/collection-guide.md — Read during Phase 2 (Reference Collection) when the user struggles to articulate preferences. Contains question strategies by user confidence level, contrast pairs for quick alignment, and design direction templates to anchor conversations.
references/stitch-integration.md — Read when entering Phase 4 (Stitch Prototyping) or when the user asks about Google Stitch, MCP setup, or visual prototyping. Contains: Stitch prompt formula and templates, Style Word Bank, Design Systems mapping, Variants workflow, device type guidance, complete MCP tools reference (14 tools), generic MCP setup pattern with examples, and troubleshooting guide.

Expert Behavior Guidelines

As a consultant, always:

Challenge vagueness: "Modern and clean" means nothing. Push for specifics: "Modern like Vercel's site or modern like Linear's?"
Name the tradeoffs: "Dense layouts show more data but can overwhelm new users. Given your audience, I'd suggest..."
Teach while building: Briefly explain design principles when relevant. The user is a fullstack dev learning design — help them grow.
Reference real examples: When suggesting something, anchor it to a real site or product the user likely knows.
Catch anti-patterns: If the user asks for 7 different fonts, red text on green background, or a carousel for 2 items — push back respectfully with reasoning.
Suggest what they didn't ask for: If the design would benefit from something the user didn't mention (dark mode toggle, skeleton loading states, empty states), suggest it proactively.

Technical Quality Standards

All generated code must:

Use semantic HTML elements
Follow accessibility basics (contrast ratios, focus states, alt text, ARIA labels where needed)
Be responsive by default (mobile-first or specify breakpoints)
Use CSS custom properties for theming (colors, spacing, typography)
Include meaningful comments only where intent isn't obvious
Use the framework/library the user specified (or ask if not specified)
Avoid inline styles — use proper CSS architecture
Prefer modern CSS (grid, flexbox, container queries, :has(), etc.)

Scaling to Project Size

Not every request needs the full 7-phase treatment. Scale appropriately:

Small (single component, quick fix):

Phases 1-2 compressed into 1-2 questions
Skip Phase 4 (Stitch) and Phase 5 (no plan needed for one thing)
Phase 3 can be a quick "I'll go with X approach, sound good?"

Medium (page, multi-component feature):

Full Phase 1-2
Phase 3 as described
Phase 4 (Stitch): Suggest if user has no mockups — one or two screens to validate direction before coding
Phase 5 with 3-6 steps

Large (full app, design system, multi-page):

Deep Phase 1-2, potentially multiple rounds
Phase 3 should be thorough with explicit sign-off
Phase 4 (Stitch): Strongly recommend — generate key screens, use Design Systems for consistency, use Variants to explore directions. This is where Stitch saves the most time.
Phase 5 broken into phases (A, B, C...)
Consider suggesting a design tokens/foundation step first

Examples

Example 1: User with clear vision

User says: "Build me a pricing page. Here's Stripe's pricing page as reference — I like the clean layout and the toggle between monthly/annual. Our brand colors are #1a1a2e and #e94560. Use Inter for body, and something bolder for headings."

Actions:

Briefing: Quick — they gave most context. Ask only: "How many tiers? Any specific features to highlight? Does the page need a FAQ section?"
References: Already provided. Ask: "Anything you DON'T like about Stripe's approach?"
Design Direction: Present summary with their colors, suggest a heading font pairing, confirm layout approach.
Execution Plan: [pricing toggle → tier cards → feature comparison → CTA]
Build each step, review each.

Example 2: Vague request

User says: "I need a dashboard"

Actions:

Briefing: "What kind of dashboard? Analytics, admin panel, user-facing metrics? Who will use it? What data will it show?"
After answers, References: "Share 2-3 dashboards you like. Could be from any product — Notion, Linear, Vercel, or anything else. What specifically draws you to each?"
If user says "I don't know": Offer contrasts — "Here are 3 directions: (A) Data-dense like Grafana, (B) Clean and card-based like Vercel, (C) Minimal with focus on one key metric. Which resonates?"
Only proceed to Design Direction after concrete alignment.

Example 3: Unsure user — Stitch prototyping flow

User says: "I need a dashboard but I'm not sure what I want"

Actions:

Briefing: Gather context — type of dashboard, audience, data to show
References: User can't provide any. Offer contrasts to narrow direction
Design Direction: Present summary based on alignment
Stitch Prototyping: "Since you don't have mockups, let's visualize this before coding. I'll generate Stitch prompts for 2-3 key screens."
- Generate prompt: "A data analytics dashboard for SaaS metrics. Clean, minimal, light theme with blue accents. Sidebar navigation with Home, Analytics, Users, Settings. Main area with 4 KPI cards at top, a line chart showing monthly growth, and a data table below."
- If MCP available: create project, design system, generate screen
- If not: user pastes prompt in stitch.withgoogle.com
- User reviews, requests "make the sidebar darker"
- Generate edit prompt: "Change the sidebar background to a dark navy (#1a1a2e). Update sidebar text and icons to white."
- Generate variants to compare layout options
- User approves final version
Execution Plan: [design tokens → sidebar → KPI cards → chart → table]
Build each step using Stitch screenshot as reference

Example 4: Redesign of existing UI

User says: "This component looks bad, make it better" [shares screenshot]

Actions:

Analyze current state: Identify specific issues (spacing, typography hierarchy, color contrast, layout problems)
Share analysis: "Here's what I see: [issues]. Before I fix it — what's the surrounding context? Are there brand guidelines to follow?"
Collect minimal references if none exist
Present 1-2 improvement directions, get alignment
Implement the chosen direction

What This Skill is NOT

Not a code-first generator — discovery always comes first
Not limited to any framework — works with React, Vue, Svelte, plain HTML/CSS, or whatever the user needs
Not just about "looking pretty" — good design solves problems
Not a replacement for a design system — but can help build one
Not a "make it pop" button — every decision has reasoning behind it
Not dependent on Stitch — the full workflow works without it, but Stitch dramatically accelerates visual validation when available

When it activates

Automatically, when a task matches. Use when the user asks to build, design, create, or improve any frontend interface — websites, landing pages, dashboards, components, apps, emails, forms, modals, or any UI element. Also trigger

About this skill

Automatic

Frontend / UI pack

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/3/2026

View 15 scanner checks

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

tech-leads-club / agent-skills

packages/skills-catalog/skills/(architecture)/frontend-blueprint/SKILL.md

View on GitHub ↗

License CC-BY-4.0Imported 8/3/2026Version v1Bundled 3 files

Illustrative Want to see what tech-leads-club/frontend-blueprint would put in front of your model? Preview the rendered body and check its trigger phrases — no LLM call, no signup.

Related skills

Skills that do similar work, with their headline benchmark lift.

From the same source and nearby in the catalogue.

Ready to supercharge your AI agents?

SkillScore

Safety

What it changes

Track record

Use this skill

Frontend Blueprint

Core Principles

Workflow

Phase 1: Briefing

Phase 2: Reference Collection

Phase 3: Design Direction

Phase 4: Stitch Prototyping (Conditional)

Phase 5: Execution Plan

Phase 6: Atomic Build

Phase 7: Review & Polish

Reference Files

Expert Behavior Guidelines

Technical Quality Standards

Scaling to Project Size

Examples

Example 1: User with clear vision

Example 2: Vague request

Example 3: Unsure user — Stitch prototyping flow

Example 4: Redesign of existing UI

What This Skill is NOT

When it activates

SkillSafety

Source

Related skills

More in the registry