{"slug":"tech-leads-club-frontend-blueprint","name":"frontend-blueprint","description":"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. 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 triggers on \"build me a UI\", \"design a page\", \"create a component\", \"improve this layout\", \"make this look better\", \"frontend\", \"interface\", \"redesign\", or when the user provides mockups, screenshots, or design references. Do NOT use for backend logic, API design, database schemas, or non-visual code tasks.","long_description":"---\nname: frontend-blueprint\ndescription: 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. 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 triggers on \"build me a UI\", \"design a page\", \"create a component\", \"improve this layout\", \"make this look better\", \"frontend\", \"interface\", \"redesign\", or when the user provides mockups, screenshots, or design references. Do NOT use for backend logic, API design, database schemas, or non-visual code tasks.\nlicense: CC-BY-4.0\nmetadata:\n  author: Felipe Rodrigues - github.com/felipfr\n  version: 1.0.0\n---\n\n# Frontend Blueprint\n\nYou are a senior frontend design consultant — not a code generator. Your job\nis to deeply understand what the user wants before writing a single line of\ncode. You ask the right questions, collect references, challenge vague\nrequests, suggest improvements, and only generate code when you have enough\ncontext to be accurate on the first attempt.\n\nYour target user is a fullstack developer who knows the basics of UI but is\nnot a design specialist. You bridge the gap between \"I know what I want but\ncan't articulate it\" and \"pixel-perfect implementation\".\n\n## Core Principles\n\n1. **Never generate code without context.** If the user says \"build me a\n   landing page\" with no references, your first response is ALWAYS questions\n   and reference requests — never code. A wrong first draft wastes more time\n   than 2 minutes of discovery.\n\n2. **References are non-negotiable.** Always ask for visual references before\n   starting. The user may not know the right words, but they know what they\n   like when they see it. Screenshots, URLs, Dribbble links, Figma exports,\n   even \"something like Apple's website\" — anything concrete beats abstract\n   descriptions.\n\n3. **Atomic delivery.** Break every project into the smallest meaningful\n   units. Deliver one piece, get approval, move to the next. Never generate\n   a full page in one shot — it guarantees rework.\n\n4. **Opinionated guidance.** You are NOT a passive executor. When the user's\n   choices conflict with good design practices, say so. Suggest alternatives.\n   Explain WHY. But ultimately respect their decision after informing them.\n\n5. **Fidelity over speed.** The goal is to match the user's vision exactly,\n   not to ship fast. Every token spent on discovery saves 10x in rework.\n\n## Workflow\n\nEvery project follows this sequence. Do NOT skip phases. If the user tries\nto jump ahead, explain briefly why the current phase matters and proceed.\n\n```\nBRIEFING → REFERENCES → DESIGN DIRECTION → [STITCH PROTOTYPING] → EXECUTION PLAN → ATOMIC BUILD → REVIEW\n```\n\nThe Stitch Prototyping phase (in brackets) is conditional — triggered when\nthe user has no existing mockups or needs visual validation before code.\nSee Phase 4 for details.\n\n### Phase 1: Briefing\n\nGoal: Understand WHAT the user needs and WHY.\n\nAsk conversationally (not as a checklist dump). Adapt based on project\ncomplexity — a simple button needs 2 questions, a full app needs more.\n\nKey areas to cover:\n\n- **What** are you building? (page, component, app, redesign, etc.)\n- **Who** is the end user? (audience, demographics, context of use)\n- **What problem** does this solve? (not just \"looks nice\" — the actual goal)\n- **Technical constraints?** (framework, existing design system, browser support, responsive requirements)\n- **Existing assets?** (brand guidelines, color palette, logos, fonts already in use)\n- **Deadline or scope?** (MVP vs polished, how much time to invest)\n\nIMPORTANT: For simple requests (a single component, a small tweak), compress\nthis to 1-2 targeted questions. Don't over-process small tasks. Scale your\ndiscovery to the project size.\n\n### Phase 2: Reference Collection\n\nGoal: Build a concrete visual vocabulary BEFORE any design decisions.\n\nThis is the most critical phase. Request references across these dimensions:\n\n**Must collect (always ask):**\n\n- Visual references: \"Share 2-3 screenshots, URLs, or images of designs you\n  like. They don't need to be the same type of project — if you like the\n  typography of site A and the layout of site B, share both and tell me what\n  you like about each.\"\n- What specifically they like in each reference: colors? layout? typography?\n  spacing? animations? overall mood?\n\n**Collect when relevant (ask based on project scope):**\n\n- Typography preferences: serif vs sans-serif, bold vs light, specific font\n  names if they have preferences\n- Icon style: outlined, filled, duotone, hand-drawn, geometric, a specific\n  library (Lucide, Phosphor, Heroicons, etc.)\n- Color direction: dark/light theme, warm/cool tones, specific brand colors,\n  accent color preferences\n- Imagery style: photography, illustrations, gradients, abstract, minimal\n- Motion/animation: subtle micro-interactions, dramatic transitions, none\n- Layout preferences: dense/spacious, symmetric/asymmetric, grid-based/organic\n\n**How to handle \"I don't know\" responses:**\nWhen the user can't provide references or is unsure, DON'T proceed blindly.\nInstead:\n\n1. Offer 2-3 contrasting directions with concrete descriptions\n2. Use well-known sites as anchors: \"More like Stripe (clean, spacious) or\n   more like Bloomberg (dense, data-rich)?\"\n3. Ask elimination questions: \"What do you definitely NOT want?\"\n4. If building for a known brand, research their existing visual identity\n\nCRITICAL: Do not proceed to Phase 3 until you have at least ONE concrete\nvisual reference or a clearly articulated direction confirmed by the user.\n\n**Stitch as a discovery tool:** If the user has no visual references AND\nis not using Figma/Sketch/Adobe XD or similar design tools, suggest Google\nStitch (stitch.withgoogle.com) as a rapid prototyping tool. Frame it as a\ntime-saver: \"Before we write code, I can generate prompts for Google Stitch\nto quickly visualize what we're building. You'll see the actual design in\nseconds and we avoid rework. Want to try it?\" If the user is interested,\nread `references/stitch-integration.md` and proceed to Phase 4 (Stitch\nPrototyping) after Phase 3. If the user has Stitch MCP connected, you can\ngenerate designs directly.\n\n### Phase 3: Design Direction\n\nGoal: Synthesize references into a clear, agreed-upon direction.\n\nBefore writing code, present a **Design Direction Summary**:\n\n```\n## Design Direction\n\n**Mood:** [describe in 2-3 words — e.g., \"clean and editorial\"]\n**Color palette:** [primary, secondary, accent, neutrals — hex codes]\n**Typography:**\n  - Headings: [font name, weight, style rationale]\n  - Body: [font name, weight, style rationale]\n**Layout approach:** [describe — e.g., \"generous whitespace, card-based, 12-col grid\"]\n**Icon style:** [library + style]\n**Key references applied:**\n  - From [ref A]: [what you're taking — e.g., \"the spacing rhythm and card design\"]\n  - From [ref B]: [what you're taking — e.g., \"the color temperature and typography pairing\"]\n**Intentional departures:**\n  - [anything you're suggesting differently from refs, and WHY]\n```\n\nWait for explicit approval or adjustments before proceeding.\n\nThis is also where you provide **expert opinions**: if the user's references\nconflict, if their color choices have accessibility issues, if their font\npairing doesn't work — say so now. Suggest improvements with clear reasoning.\n\n### Phase 4: Stitch Prototyping (Conditional)\n\nGoal: Visualize the design BEFORE writing any code.\n\nThis phase activates when:\n\n- The user has no existing mockups (Figma, Sketch, etc.)\n- The user is uncertain about direction and wants to see options\n- The project has multiple screens or complex layouts\n- The user explicitly wants to prototype first\n\nRead `references/stitch-integration.md` before executing this phase.\n\n**If Stitch MCP is connected (agent has access to Stitch tools):**\n\n1. Create a Stitch project: `create_project(title: \"Project Name\")`\n2. Create a Design System from the approved Design Direction (Phase 3),\n   mapping color palette → `customColor`/`preset`, typography → `font`,\n   dark/light → `colorMode`, border radius → `roundness`\n3. Generate the first screen using `generate_screen_from_text` with a\n   prompt built from the Design Direction. Use the prompt templates in\n   `references/stitch-integration.md` Section 4.\n4. Present the generated screenshot to the user for review\n5. If the user wants alternatives: use `generate_variants` with\n   appropriate `creativeRange` and `aspects`\n6. If the user wants edits: use `edit_screens` with targeted, specific\n   prompts (one change at a time)\n7. Apply the design system to all screens for consistency\n8. Once all screens are approved, extract HTML via `get_screen` to use\n   as a reference in the Atomic Build phase\n\n**If Stitch MCP is NOT connected (manual workflow):**\n\n1. Ask if the user wants to set up MCP (offer setup guidance from\n   `references/stitch-integration.md` Section 3 — it covers the generic\n   config pattern and API Key method)\n2. If they prefer manual: generate ready-to-paste prompts following the\n   Stitch prompt formula: **Idea + Theme + Content + Image (optional)**\n3. Guide the user through the Stitch workflow:\n   - Paste the prompt at stitch.withgoogle.com\n   - Choose device type (Mobile for apps, Web for websites/dashboards)\n   - Generate, review, and share screenshots back\n4. Generate targeted refinement prompts one at a time based on feedback\n5. Suggest using **Variants** for comparison: \"In Stitch, select the\n   screen → Generate → Variants. Set Creative Range to Explore and\n   generate 3 options.\"\n6. Suggest using **Edit Theme** for quick adjustments: \"Select the\n   screen → Generate → Edit Theme to quickly tweak colors, font, dark\n   mode, or corner radius.\"\n7. Suggest creating a **Prototype** to test interactivity: \"Select the\n   screen → Generate → Prototype to see hover states and scroll behavior.\"\n8. Once approved, user downloads HTML/images from Stitch for reference\n\n**Prompt generation rules:**\n\n- Follow the exact formula: Idea + Theme + Content\n- Use UI/UX keywords: \"navigation bar\", \"hero section\", \"card layout\",\n  \"call-to-action button\", \"visual hierarchy\", \"drop shadow\"\n- Set the vibe with adjectives from the Design Direction mood\n- Use the Style Word Bank for creative direction (Bento Grid, Editorial,\n  Glassmorphism, Brutalist, Cyberpunk, etc.)\n- If the user's chosen font is not in Stitch's 29 supported fonts,\n  pick the closest match and note the substitution\n- Keep prompts focused — one screen/section per generation\n- Refinement prompts: one major change at a time, be specific about\n  WHAT to change and HOW\n\n**Exiting this phase:**\nProceed to Phase 5 when the user has approved visual designs for all\nkey screens. These become the source of truth for code generation.\nIf the user decides to skip Stitch at any point, proceed directly to\nPhase 5.\n\n### Phase 5: Execution Plan\n\nGoal: Break the project into atomic, deliverable units.\n\nPresent a numbered list of components/sections to build, in dependency order:\n\n```\n## Execution Plan\n\nI'll build this in [N] steps, each one reviewed before moving on:\n\n1. **[Component/Section]** — [brief description, ~effort indicator]\n2. **[Component/Section]** — [brief description]\n3. **[Component/Section]** — [brief description]\n...\n\nStarting with #1. Ready?\n```\n\nPrinciples for the plan:\n\n- Each step should produce something **visually reviewable**\n- Dependencies first (design tokens/base styles → layout → components → details)\n- Group logically but keep steps small enough that rework affects only one piece\n- For large projects, suggest a phased approach (Phase A: core structure,\n  Phase B: polish and animations, Phase C: responsive/edge cases)\n\n### Phase 6: Atomic Build\n\nGoa","tagline":"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 v","category":"research","tags":["agent-skill"],"author":"tech-leads-club","verified":false,"attribution":{"status":"registry_indexed","statusLabel":"Registry indexed","shortLabel":"REGISTRY INDEXED","sourceLabel":"github candidate review","sourceDetail":"tech-leads-club/agent-skills","creatorName":"tech-leads-club","creatorUrl":"https://github.com/tech-leads-club","sourceUrl":"https://github.com/tech-leads-club/agent-skills/tree/main/packages/skills-catalog/skills/(architecture)/frontend-blueprint","indexedBy":"OpenAgentSkill community index","claimUrl":"https://www.openagentskill.com/skills/tech-leads-club-frontend-blueprint#claim-this-skill","claimCta":"Claim this skill","trustNote":"This listing was indexed from public sources and is not marked official until a maintainer claim is approved.","publicNote":"Attribution links to the public repository or creator profile. Creators can claim the listing to update ownership signals."},"stats":{"stars":5107,"forks":469,"verified_installs":0,"successful_runs":0,"total_outcomes":0,"rating":0,"review_count":0,"quality_score":49.51},"quality":{"score":84,"tier":"strong","label":"Strong","summary":"Solid option that is likely worth shortlisting for production workflows.","signals":[{"label":"GitHub stars","value":"5.1K","tone":"positive"},{"label":"Freshness","value":"7d ago","tone":"positive"},{"label":"Install ready","value":"Yes","tone":"positive"},{"label":"License","value":"CC-BY-4.0","tone":"neutral"}],"warnings":["The SKILL.md excerpt appears truncated in the submission, but the provided content and supporting reference files are coherent and complete enough for evaluation."]},"trust":{"version":"trust-score-v5","score":65,"base_score":73,"outcome_confidence":0,"tier":"review","label":"Sandbox only","summary":"Useful candidate with missing or mixed trust signals. Keep it in an isolated workspace until the outcome loop proves task fit.","recommendedAction":"Run only in a sandbox and compare close alternatives before using it for real work.","decision":{"install_policy":"human_review_before_install","auto_install_allowed":false,"human_review_required":true,"sandbox_first":true,"agent_action":"Compare alternatives before installing.","reasoning":["65/100 Trust Score v5","73/100 Trust Score v4 baseline","Needs more real agent outcomes before unattended install","Install path is available","Review before production"],"review_required_when":["The workspace contains production secrets, payments, private customer data, or irreversible actions.","The install command requests shell, network, credential, database, or broad filesystem access.","Outcome evidence is missing, recently failed, or required human review.","Production credentials, payments, or irreversible account changes without explicit human review","Sensitive private data before reviewing repository code, license, and permission surface","Automatic installation in a production workspace"]},"dimensions":[{"id":"github_adoption","label":"GitHub adoption","score":94,"weight":0.13,"status":"pass","detail":"5.1K GitHub stars"},{"id":"repo_activity","label":"Stars/forks activity","score":88,"weight":0.08,"status":"pass","detail":"5.1K stars, 469 forks; issue activity unavailable in current metadata"},{"id":"maintenance","label":"Recent maintenance","score":100,"weight":0.14,"status":"pass","detail":"7d since push"},{"id":"license","label":"License clarity","score":86,"weight":0.09,"status":"pass","detail":"CC-BY-4.0"},{"id":"documentation","label":"README/SKILL.md completeness","score":76,"weight":0.14,"status":"info","detail":"Public metadata needs stronger README/SKILL.md context"},{"id":"dependency_risk","label":"Dependency/runtime risk","score":56,"weight":0.12,"status":"warn","detail":"credential or environment access, network or browser surface"},{"id":"installability","label":"Install availability","score":92,"weight":0.1,"status":"pass","detail":"npx skills add tech-leads-club/agent-skills --skill frontend-blueprint"},{"id":"install_safety","label":"Install command safety","score":92,"weight":0.1,"status":"pass","detail":"standard package or runtime install path"},{"id":"permission_surface","label":"Permission surface","score":48,"weight":0.07,"status":"warn","detail":"secrets or environment access, network or browser access"},{"id":"repository","label":"Repository evidence","score":86,"weight":0.04,"status":"pass","detail":"https://github.com/tech-leads-club/agent-skills/tree/main/packages/skills-catalog/skills/(architecture)/frontend-blueprint"},{"id":"review_status","label":"Review status","score":66,"weight":0.05,"status":"info","detail":"AI review data available"},{"id":"agent_outcomes","label":"Agent Proven outcomes","score":54,"weight":0.13,"status":"info","detail":"No agent outcome data yet"}],"checks":[{"status":"pass","label":"GitHub adoption","detail":"5.1K GitHub stars"},{"status":"pass","label":"Stars/forks activity","detail":"5.1K stars, 469 forks; issue activity unavailable in current metadata"},{"status":"pass","label":"Recent maintenance","detail":"7d since push"},{"status":"pass","label":"License clarity","detail":"CC-BY-4.0"},{"status":"info","label":"README/SKILL.md completeness","detail":"Public metadata needs stronger README/SKILL.md context"},{"status":"warn","label":"Dependency/runtime risk","detail":"credential or environment access, network or browser surface"},{"status":"pass","label":"Install availability","detail":"npx skills add tech-leads-club/agent-skills --skill frontend-blueprint"},{"status":"pass","label":"Install command safety","detail":"standard package or runtime install path"},{"status":"warn","label":"Permission surface","detail":"secrets or environment access, network or browser access"},{"status":"pass","label":"Repository evidence","detail":"https://github.com/tech-leads-club/agent-skills/tree/main/packages/skills-catalog/skills/(architecture)/frontend-blueprint"},{"status":"info","label":"Review status","detail":"AI review data available"},{"status":"info","label":"Agent Proven outcomes","detail":"No agent outcome data yet"},{"status":"warn","label":"Ownership","detail":"No approved owner claim yet"},{"status":"info","label":"OpenAgentSkill usage","detail":"No local usage activity yet"},{"status":"info","label":"Agent outcomes","detail":"No agent outcome data yet"}],"strengths":["AI review approved","Install path is available","Repository evidence is available","Recently maintained repository","Large GitHub adoption signal","Install command has no obvious high-risk pattern","Outcome loop is ready but needs first real agent run"],"warnings":["The SKILL.md excerpt appears truncated in the submission, but the provided content and supporting reference files are coherent and complete enough for evaluation.","Financial research output is not financial advice; require human review before any live investment decision.","Quality score needs review","Permission surface needs review: secrets or environment access, network or browser access","Dependency/runtime risk: credential or environment access, network or browser surface","Permission surface: secrets or environment access, network or browser access","No real agent outcome reports yet","Human review required before unattended installation"],"evidence":{"stars":"5.1K GitHub stars","repoActivity":"5.1K stars, 469 forks","lastPushed":"7d since push","license":"CC-BY-4.0","repository":"https://github.com/tech-leads-club/agent-skills/tree/main/packages/skills-catalog/skills/(architecture)/frontend-blueprint","install":"npx skills add tech-leads-club/agent-skills --skill frontend-blueprint","installSafety":"standard package or runtime install path","permissionSurface":"secrets or environment access, network or browser access","documentation":"Usable metadata, review docs","agentOutcomes":"No agent outcome data yet","agentProvenScore":0,"outcomeConfidence":"0%","installPolicy":"human_review_before_install"},"installReadiness":{"ready":true,"command":"npx skills add tech-leads-club/agent-skills --skill frontend-blueprint","policy":"human_review_before_install","label":"Human review before install","notes":["Install path is available","Repository evidence is available","License is declared","No Agent Proven outcome evidence yet","7d since push","Financial domain: human review is required before use in a live investment workflow.","Trust Score v5 requires review or sandbox-only use before install."]},"agentCompatibility":["Codex","Claude Code","Cursor","OpenAgentSkill CLI"],"riskSummary":{"level":"medium","label":"Review before production","notes":["The SKILL.md excerpt appears truncated in the submission, but the provided content and supporting reference files are coherent and complete enough for evaluation.","Financial research output is not financial advice; require human review before any live investment decision.","Quality score needs review","Permission surface needs review: secrets or environment access, network or browser access","Dependency/runtime risk: credential or environment access, network or browser surface"]},"outcomeEvidence":{"total":0,"successes":0,"failures":0,"notRelevant":0,"successRate":null,"installAttempts":0,"riskBlocked":0,"setupRequired":0,"installSuccessRate":null,"avgOutputQuality":null,"avgTimeToUsefulMs":null,"productionOutcomes":0,"humanReviewRequired":0,"recentSuccessRate":null,"recentFailureRate":null,"uniqueAgents":0,"agentProvenScore":0,"agentProvenLabel":"Needs first agent run","lastOutcomeAt":null,"label":"No agent outcome data yet"},"autoInstall":{"allowed":false,"sandboxRequired":true,"policy":"human_review_before_install","reason":"Compare alternatives before installing."},"outcome_loop":{"version":"openagentskill-agent-outcome-v4","required_after_install":true,"endpoint":"/api/agent/outcome","method":"POST","event_id_source":"feedback.event_id, install_receipt.resolve_event_id, or decision_packet.outcome_feedback.event_id","expected_outcomes":["success","failed","not_relevant","blocked_by_risk","setup_required"],"required_fields":["event_id","skill_slug","task"],"quality_fields":["task_success","output_quality","error_type","human_review_required","used_in_production","workspace","evidence_url","time_to_useful_ms","source_version"],"ranking_inputs_updated":["Trust Score v5 outcome confidence","Agent Proven Score","Resolve ranking task-fit evidence","Skill detail machine-readable metadata","Outcome leaderboard"]},"agent_contract":{"suited_tasks":["research","agent-skill"],"suited_agents":["Codex","Claude Code","Cursor","OpenAgentSkill CLI"],"install_command":"npx skills add tech-leads-club/agent-skills --skill frontend-blueprint","trust_score":65,"trust_version":"trust-score-v5","risk_level":"medium","do_not_use_when":["Production credentials, payments, or irreversible account changes without explicit human review","Sensitive private data before reviewing repository code, license, and permission surface","Automatic installation in a production workspace","Autonomous investment, trading, tax, or suitability decisions without a qualified human review"],"before_install":["Read the audit page and machine-readable metadata.","Confirm the install command, license, and permission surface fit the workspace.","Get explicit human approval or choose an alternative before installing."],"after_run":["Report the outcome to /api/agent/outcome using the resolve event id.","Include output_quality, workspace, human_review_required, and evidence_url when available.","Re-resolve before broad production rollout."]},"bestFor":["research","agent-skill"],"doNotUseFor":["Production credentials, payments, or irreversible account changes without explicit human review","Sensitive private data before reviewing repository code, license, and permission surface","Automatic installation in a production workspace","Autonomous investment, trading, tax, or suitability decisions without a qualified human review"],"knownRisks":["The SKILL.md excerpt appears truncated in the submission, but the provided content and supporting reference files are coherent and complete enough for evaluation.","Financial research output is not financial advice; require human review before any live investment decision.","Quality score needs review","Permission surface needs review: secrets or environment access, network or browser access","Dependency/runtime risk: credential or environment access, network or browser surface","Permission surface: secrets or environment access, network or browser access"],"backward_compatible":{"trust_score_v4":{"version":"trust-score-v4","score":73,"tier":"strong","label":"Strong shortlist","summary":"Good trust signals with a few areas worth checking before rollout."}}},"trust_score_v5":{"version":"trust-score-v5","score":65,"base_score":73,"outcome_confidence":0,"tier":"review","label":"Sandbox only","summary":"Useful candidate with missing or mixed trust signals. Keep it in an isolated workspace until the outcome loop proves task fit.","recommendedAction":"Run only in a sandbox and compare close alternatives before using it for real work.","decision":{"install_policy":"human_review_before_install","auto_install_allowed":false,"human_review_required":true,"sandbox_first":true,"agent_action":"Compare alternatives before installing.","reasoning":["65/100 Trust Score v5","73/100 Trust Score v4 baseline","Needs more real agent outcomes before unattended install","Install path is available","Review before production"],"review_required_when":["The workspace contains production secrets, payments, private customer data, or irreversible actions.","The install command requests shell, network, credential, database, or broad filesystem access.","Outcome evidence is missing, recently failed, or required human review.","Production credentials, payments, or irreversible account changes without explicit human review","Sensitive private data before reviewing repository code, license, and permission surface","Automatic installation in a production workspace"]},"dimensions":[{"id":"github_adoption","label":"GitHub adoption","score":94,"weight":0.13,"status":"pass","detail":"5.1K GitHub stars"},{"id":"repo_activity","label":"Stars/forks activity","score":88,"weight":0.08,"status":"pass","detail":"5.1K stars, 469 forks; issue activity unavailable in current metadata"},{"id":"maintenance","label":"Recent maintenance","score":100,"weight":0.14,"status":"pass","detail":"7d since push"},{"id":"license","label":"License clarity","score":86,"weight":0.09,"status":"pass","detail":"CC-BY-4.0"},{"id":"documentation","label":"README/SKILL.md completeness","score":76,"weight":0.14,"status":"info","detail":"Public metadata needs stronger README/SKILL.md context"},{"id":"dependency_risk","label":"Dependency/runtime risk","score":56,"weight":0.12,"status":"warn","detail":"credential or environment access, network or browser surface"},{"id":"installability","label":"Install availability","score":92,"weight":0.1,"status":"pass","detail":"npx skills add tech-leads-club/agent-skills --skill frontend-blueprint"},{"id":"install_safety","label":"Install command safety","score":92,"weight":0.1,"status":"pass","detail":"standard package or runtime install path"},{"id":"permission_surface","label":"Permission surface","score":48,"weight":0.07,"status":"warn","detail":"secrets or environment access, network or browser access"},{"id":"repository","label":"Repository evidence","score":86,"weight":0.04,"status":"pass","detail":"https://github.com/tech-leads-club/agent-skills/tree/main/packages/skills-catalog/skills/(architecture)/frontend-blueprint"},{"id":"review_status","label":"Review status","score":66,"weight":0.05,"status":"info","detail":"AI review data available"},{"id":"agent_outcomes","label":"Agent Proven outcomes","score":54,"weight":0.13,"status":"info","detail":"No agent outcome data yet"}],"checks":[{"status":"pass","label":"GitHub adoption","detail":"5.1K GitHub stars"},{"status":"pass","label":"Stars/forks activity","detail":"5.1K stars, 469 forks; issue activity unavailable in current metadata"},{"status":"pass","label":"Recent maintenance","detail":"7d since push"},{"status":"pass","label":"License clarity","detail":"CC-BY-4.0"},{"status":"info","label":"README/SKILL.md completeness","detail":"Public metadata needs stronger README/SKILL.md context"},{"status":"warn","label":"Dependency/runtime risk","detail":"credential or environment access, network or browser surface"},{"status":"pass","label":"Install availability","detail":"npx skills add tech-leads-club/agent-skills --skill frontend-blueprint"},{"status":"pass","label":"Install command safety","detail":"standard package or runtime install path"},{"status":"warn","label":"Permission surface","detail":"secrets or environment access, network or browser access"},{"status":"pass","label":"Repository evidence","detail":"https://github.com/tech-leads-club/agent-skills/tree/main/packages/skills-catalog/skills/(architecture)/frontend-blueprint"},{"status":"info","label":"Review status","detail":"AI review data available"},{"status":"info","label":"Agent Proven outcomes","detail":"No agent outcome data yet"},{"status":"warn","label":"Ownership","detail":"No approved owner claim yet"},{"status":"info","label":"OpenAgentSkill usage","detail":"No local usage activity yet"},{"status":"info","label":"Agent outcomes","detail":"No agent outcome data yet"}],"strengths":["AI review approved","Install path is available","Repository evidence is available","Recently maintained repository","Large GitHub adoption signal","Install command has no obvious high-risk pattern","Outcome loop is ready but needs first real agent run"],"warnings":["The SKILL.md excerpt appears truncated in the submission, but the provided content and supporting reference files are coherent and complete enough for evaluation.","Financial research output is not financial advice; require human review before any live investment decision.","Quality score needs review","Permission surface needs review: secrets or environment access, network or browser access","Dependency/runtime risk: credential or environment access, network or browser surface","Permission surface: secrets or environment access, network or browser access","No real agent outcome reports yet","Human review required before unattended installation"],"evidence":{"stars":"5.1K GitHub stars","repoActivity":"5.1K stars, 469 forks","lastPushed":"7d since push","license":"CC-BY-4.0","repository":"https://github.com/tech-leads-club/agent-skills/tree/main/packages/skills-catalog/skills/(architecture)/frontend-blueprint","install":"npx skills add tech-leads-club/agent-skills --skill frontend-blueprint","installSafety":"standard package or runtime install path","permissionSurface":"secrets or environment access, network or browser access","documentation":"Usable metadata, review docs","agentOutcomes":"No agent outcome data yet","agentProvenScore":0,"outcomeConfidence":"0%","installPolicy":"human_review_before_install"},"installReadiness":{"ready":true,"command":"npx skills add tech-leads-club/agent-skills --skill frontend-blueprint","policy":"human_review_before_install","label":"Human review before install","notes":["Install path is available","Repository evidence is available","License is declared","No Agent Proven outcome evidence yet","7d since push","Financial domain: human review is required before use in a live investment workflow.","Trust Score v5 requires review or sandbox-only use before install."]},"agentCompatibility":["Codex","Claude Code","Cursor","OpenAgentSkill CLI"],"riskSummary":{"level":"medium","label":"Review before production","notes":["The SKILL.md excerpt appears truncated in the submission, but the provided content and supporting reference files are coherent and complete enough for evaluation.","Financial research output is not financial advice; require human review before any live investment decision.","Quality score needs review","Permission surface needs review: secrets or environment access, network or browser access","Dependency/runtime risk: credential or environment access, network or browser surface"]},"outcomeEvidence":{"total":0,"successes":0,"failures":0,"notRelevant":0,"successRate":null,"installAttempts":0,"riskBlocked":0,"setupRequired":0,"installSuccessRate":null,"avgOutputQuality":null,"avgTimeToUsefulMs":null,"productionOutcomes":0,"humanReviewRequired":0,"recentSuccessRate":null,"recentFailureRate":null,"uniqueAgents":0,"agentProvenScore":0,"agentProvenLabel":"Needs first agent run","lastOutcomeAt":null,"label":"No agent outcome data yet"},"autoInstall":{"allowed":false,"sandboxRequired":true,"policy":"human_review_before_install","reason":"Compare alternatives before installing."},"outcome_loop":{"version":"openagentskill-agent-outcome-v4","required_after_install":true,"endpoint":"/api/agent/outcome","method":"POST","event_id_source":"feedback.event_id, install_receipt.resolve_event_id, or decision_packet.outcome_feedback.event_id","expected_outcomes":["success","failed","not_relevant","blocked_by_risk","setup_required"],"required_fields":["event_id","skill_slug","task"],"quality_fields":["task_success","output_quality","error_type","human_review_required","used_in_production","workspace","evidence_url","time_to_useful_ms","source_version"],"ranking_inputs_updated":["Trust Score v5 outcome confidence","Agent Proven Score","Resolve ranking task-fit evidence","Skill detail machine-readable metadata","Outcome leaderboard"]},"agent_contract":{"suited_tasks":["research","agent-skill"],"suited_agents":["Codex","Claude Code","Cursor","OpenAgentSkill CLI"],"install_command":"npx skills add tech-leads-club/agent-skills --skill frontend-blueprint","trust_score":65,"trust_version":"trust-score-v5","risk_level":"medium","do_not_use_when":["Production credentials, payments, or irreversible account changes without explicit human review","Sensitive private data before reviewing repository code, license, and permission surface","Automatic installation in a production workspace","Autonomous investment, trading, tax, or suitability decisions without a qualified human review"],"before_install":["Read the audit page and machine-readable metadata.","Confirm the install command, license, and permission surface fit the workspace.","Get explicit human approval or choose an alternative before installing."],"after_run":["Report the outcome to /api/agent/outcome using the resolve event id.","Include output_quality, workspace, human_review_required, and evidence_url when available.","Re-resolve before broad production rollout."]},"bestFor":["research","agent-skill"],"doNotUseFor":["Production credentials, payments, or irreversible account changes without explicit human review","Sensitive private data before reviewing repository code, license, and permission surface","Automatic installation in a production workspace","Autonomous investment, trading, tax, or suitability decisions without a qualified human review"],"knownRisks":["The SKILL.md excerpt appears truncated in the submission, but the provided content and supporting reference files are coherent and complete enough for evaluation.","Financial research output is not financial advice; require human review before any live investment decision.","Quality score needs review","Permission surface needs review: secrets or environment access, network or browser access","Dependency/runtime risk: credential or environment access, network or browser surface","Permission surface: secrets or environment access, network or browser access"],"backward_compatible":{"trust_score_v4":{"version":"trust-score-v4","score":73,"tier":"strong","label":"Strong shortlist","summary":"Good trust signals with a few areas worth checking before rollout."}}},"trust_score_v4":{"version":"trust-score-v4","score":73,"tier":"strong","label":"Strong shortlist","summary":"Good trust signals with a few areas worth checking before rollout.","recommendedAction":"Test in a sandbox workflow and compare its install path with close alternatives.","dimensions":[{"id":"github_adoption","label":"GitHub adoption","score":94,"weight":0.13,"status":"pass","detail":"5.1K GitHub stars"},{"id":"repo_activity","label":"Stars/forks activity","score":88,"weight":0.08,"status":"pass","detail":"5.1K stars, 469 forks; issue activity unavailable in current metadata"},{"id":"maintenance","label":"Recent maintenance","score":100,"weight":0.14,"status":"pass","detail":"7d since push"},{"id":"license","label":"License clarity","score":86,"weight":0.09,"status":"pass","detail":"CC-BY-4.0"},{"id":"documentation","label":"README/SKILL.md completeness","score":76,"weight":0.14,"status":"info","detail":"Public metadata needs stronger README/SKILL.md context"},{"id":"dependency_risk","label":"Dependency/runtime risk","score":56,"weight":0.12,"status":"warn","detail":"credential or environment access, network or browser surface"},{"id":"installability","label":"Install availability","score":92,"weight":0.1,"status":"pass","detail":"npx skills add tech-leads-club/agent-skills --skill frontend-blueprint"},{"id":"install_safety","label":"Install command safety","score":92,"weight":0.1,"status":"pass","detail":"standard package or runtime install path"},{"id":"permission_surface","label":"Permission surface","score":48,"weight":0.07,"status":"warn","detail":"secrets or environment access, network or browser access"},{"id":"repository","label":"Repository evidence","score":86,"weight":0.04,"status":"pass","detail":"https://github.com/tech-leads-club/agent-skills/tree/main/packages/skills-catalog/skills/(architecture)/frontend-blueprint"},{"id":"review_status","label":"Review status","score":66,"weight":0.05,"status":"info","detail":"AI review data available"},{"id":"agent_outcomes","label":"Agent Proven outcomes","score":54,"weight":0.13,"status":"info","detail":"No agent outcome data yet"}],"checks":[{"status":"pass","label":"GitHub adoption","detail":"5.1K GitHub stars"},{"status":"pass","label":"Stars/forks activity","detail":"5.1K stars, 469 forks; issue activity unavailable in current metadata"},{"status":"pass","label":"Recent maintenance","detail":"7d since push"},{"status":"pass","label":"License clarity","detail":"CC-BY-4.0"},{"status":"info","label":"README/SKILL.md completeness","detail":"Public metadata needs stronger README/SKILL.md context"},{"status":"warn","label":"Dependency/runtime risk","detail":"credential or environment access, network or browser surface"},{"status":"pass","label":"Install availability","detail":"npx skills add tech-leads-club/agent-skills --skill frontend-blueprint"},{"status":"pass","label":"Install command safety","detail":"standard package or runtime install path"},{"status":"warn","label":"Permission surface","detail":"secrets or environment access, network or browser access"},{"status":"pass","label":"Repository evidence","detail":"https://github.com/tech-leads-club/agent-skills/tree/main/packages/skills-catalog/skills/(architecture)/frontend-blueprint"},{"status":"info","label":"Review status","detail":"AI review data available"},{"status":"info","label":"Agent Proven outcomes","detail":"No agent outcome data yet"},{"status":"warn","label":"Ownership","detail":"No approved owner claim yet"},{"status":"info","label":"OpenAgentSkill usage","detail":"No local usage activity yet"},{"status":"info","label":"Agent outcomes","detail":"No agent outcome data yet"}],"strengths":["AI review approved","Install path is available","Repository evidence is available","Recently maintained repository","Large GitHub adoption signal","Install command has no obvious high-risk pattern"],"warnings":["The SKILL.md excerpt appears truncated in the submission, but the provided content and supporting reference files are coherent and complete enough for evaluation.","Financial research output is not financial advice; require human review before any live investment decision.","Quality score needs review","Permission surface needs review: secrets or environment access, network or browser access","Dependency/runtime risk: credential or environment access, network or browser surface","Permission surface: secrets or environment access, network or browser access"],"evidence":{"stars":"5.1K GitHub stars","repoActivity":"5.1K stars, 469 forks","lastPushed":"7d since push","license":"CC-BY-4.0","repository":"https://github.com/tech-leads-club/agent-skills/tree/main/packages/skills-catalog/skills/(architecture)/frontend-blueprint","install":"npx skills add tech-leads-club/agent-skills --skill frontend-blueprint","installSafety":"standard package or runtime install path","permissionSurface":"secrets or environment access, network or browser access","documentation":"Usable metadata, review docs","agentOutcomes":"No agent outcome data yet"},"installReadiness":{"ready":true,"command":"npx skills add tech-leads-club/agent-skills --skill frontend-blueprint","policy":"human_review_before_install","label":"Human review before install","notes":["Install path is available","Repository evidence is available","License is declared","No Agent Proven outcome evidence yet","7d since push","Financial domain: human review is required before use in a live investment workflow."]},"agentCompatibility":["Codex","Claude Code","Cursor","OpenAgentSkill CLI"],"riskSummary":{"level":"medium","label":"Review before production","notes":["The SKILL.md excerpt appears truncated in the submission, but the provided content and supporting reference files are coherent and complete enough for evaluation.","Financial research output is not financial advice; require human review before any live investment decision.","Quality score needs review","Permission surface needs review: secrets or environment access, network or browser access","Dependency/runtime risk: credential or environment access, network or browser surface"]},"outcomeEvidence":{"total":0,"successes":0,"failures":0,"notRelevant":0,"successRate":null,"installAttempts":0,"riskBlocked":0,"setupRequired":0,"installSuccessRate":null,"avgOutputQuality":null,"avgTimeToUsefulMs":null,"productionOutcomes":0,"humanReviewRequired":0,"recentSuccessRate":null,"recentFailureRate":null,"uniqueAgents":0,"agentProvenScore":0,"agentProvenLabel":"Needs first agent run","lastOutcomeAt":null,"label":"No agent outcome data yet"},"autoInstall":{"allowed":false,"sandboxRequired":true,"policy":"human_review_before_install","reason":"Human review or sandbox validation is required before automatic installation."},"bestFor":["research","agent-skill"],"doNotUseFor":["Production credentials, payments, or irreversible account changes without explicit human review","Sensitive private data before reviewing repository code, license, and permission surface","Automatic installation in a production workspace","Autonomous investment, trading, tax, or suitability decisions without a qualified human review"],"knownRisks":["The SKILL.md excerpt appears truncated in the submission, but the provided content and supporting reference files are coherent and complete enough for evaluation.","Financial research output is not financial advice; require human review before any live investment decision.","Quality score needs review","Permission surface needs review: secrets or environment access, network or browser access","Dependency/runtime risk: credential or environment access, network or browser surface","Permission surface: secrets or environment access, network or browser access"]},"agent_proven":{"version":"agent-proven-v1","score":0,"tier":"unproven","label":"Needs first agent run","summary":"No agent outcome reports yet. Use Resolve, run one narrow sandbox task, then report the result.","metrics":{"totalOutcomes":0,"successfulOutcomes":0,"failedOutcomes":0,"installAttempts":0,"installSuccessRate":null,"successRate":null,"recentSuccessRate":null,"recentFailureRate":null,"riskBlocked":0,"setupRequired":0,"notRelevant":0,"avgOutputQuality":null,"avgTimeToUsefulMs":null,"productionOutcomes":0,"humanReviewRequired":0,"uniqueAgents":0,"lastOutcomeAt":null},"signals":[],"penalties":["No real agent outcome evidence yet"]},"outcome_stats":null,"safety":{"score":50,"level":"avoid_auto_install","label":"Avoid automatic install","safety_tier":{"tier":"experimental","label":"Experimental","badge":"EXPERIMENTAL","summary":"Sparse or mixed signals. Useful for discovery, but not for autonomous installation.","recommended_action":"Test manually in an isolated workspace and compare against safer alternatives.","auto_install_policy":"review","reasons":["High-risk permission hints: Secrets or environment access","50/100 agent safety score"]},"auto_install_allowed":false,"human_review_required":true,"blocked":false,"audit_risk":"needs_review","permission_hints":[{"id":"browser","label":"Browser automation","reason":"Skill may drive a browser or interact with web pages.","severity":"medium"},{"id":"network","label":"Network access","reason":"Skill likely fetches remote pages, APIs, repositories, or external services.","severity":"medium"},{"id":"secrets","label":"Secrets or environment access","reason":"Skill metadata references credentials, tokens, environment variables, or secret-bearing workflows.","severity":"high"},{"id":"database","label":"Database access","reason":"Skill may inspect schemas, query databases, or work with persistent stores.","severity":"medium"}],"policy_warnings":["High-risk permission hints: Secrets or environment access","Dependency or permission surface needs review"],"constraints_applied":{"max_risk":"medium","needs_install_command":true,"min_stars":0}},"safety_gate":{"tier":"experimental","label":"Experimental","badge":"EXPERIMENTAL","auto_install_policy":"review","auto_install_allowed":false,"blocked":false,"human_review_required":true,"recommended_action":"Test manually in an isolated workspace and compare against safer alternatives.","reasons":["High-risk permission hints: Secrets or environment access","50/100 agent safety score"]},"eval":{"version":"openagentskill-skill-eval-v1","status":"failed","score":75,"risk_level":"high","decision":{"recommendation":"do_not_auto_install","reason":"Permission surface: secrets or environment access, network or browser access","auto_install_allowed":false,"policy":"block","human_review_required":true},"blockers":["Permission surface: secrets or environment access, network or browser access"],"warnings":["Trust score: Good trust signals with a few areas worth checking before rollout.","Audit score: Needs review","Agent safety gate: Sparse or mixed signals. Useful for discovery, but not for autonomous installation.","README/SKILL.md completeness: Public metadata needs stronger README/SKILL.md context","High-risk permission hints: Secrets or environment access","Dependency or permission surface needs review","Permission surface may require sandboxing","Financial research output is not financial advice; require human review before any live investment decision","The SKILL.md excerpt appears truncated in the submission, but the provided content and supporting reference files are coherent and complete enough for evaluation.","No explicit instruction to ignore untrusted instructions embedded in user-provided references, screenshots, or URLs.","Financial research output is not financial advice; require human review before any live investment decision.","Quality score needs review"],"validation_plan":["Inspect repository, README/SKILL.md, license, and recent commits before production use.","Install in an isolated workspace or sandbox with no production secrets available.","Run the smallest representative task and record files touched, commands run, network access, and outputs.","Compare the selected skill against at least one alternative when the eval status is review or failed.","Promote only after the agent reports a successful verification result and unresolved warnings are accepted."],"checks":[{"id":"task_fit","label":"Task fit","status":"pass","score":94,"required_for_auto_install":true,"detail":"Task wording matches this skill metadata.","evidence":["Evaluate frontend-blueprint before installing it in an agent workflow","research","GitHub automation workflows; Claude Code teams; teams that value GitHub adoption signals"]},{"id":"install_path","label":"Install path","status":"pass","score":92,"required_for_auto_install":true,"detail":"Install handoff is available.","evidence":["npx skills add tech-leads-club/agent-skills --skill frontend-blueprint"]},{"id":"install_safety","label":"Install command safety","status":"pass","score":92,"required_for_auto_install":true,"detail":"standard package or runtime install path","evidence":["npx skills add tech-leads-club/agent-skills --skill frontend-blueprint"]},{"id":"trust_score","label":"Trust score","status":"warn","score":73,"required_for_auto_install":true,"detail":"Good trust signals with a few areas worth checking before rollout.","evidence":["Strong shortlist","5.1K GitHub stars","CC-BY-4.0"]},{"id":"audit_score","label":"Audit score","status":"warn","score":82,"required_for_auto_install":true,"detail":"Needs review","evidence":["Dependency or permission surface needs review"]},{"id":"agent_safety_gate","label":"Agent safety gate","status":"warn","score":50,"required_for_auto_install":true,"detail":"Sparse or mixed signals. Useful for discovery, but not for autonomous installation.","evidence":["Test manually in an isolated workspace and compare against safer alternatives.","High-risk permission hints: Secrets or environment access"]},{"id":"readme_skillmd_completeness","label":"README/SKILL.md completeness","status":"warn","score":76,"required_for_auto_install":false,"detail":"Public metadata needs stronger README/SKILL.md context","evidence":["Usable metadata, review docs"]},{"id":"license_clarity","label":"License clarity","status":"pass","score":86,"required_for_auto_install":true,"detail":"CC-BY-4.0","evidence":["CC-BY-4.0"]},{"id":"recent_maintenance","label":"Recent maintenance","status":"pass","score":100,"required_for_auto_install":false,"detail":"7d since push","evidence":["7d since push"]},{"id":"permission_surface","label":"Permission surface","status":"fail","score":48,"required_for_auto_install":true,"detail":"secrets or environment access, network or browser access","evidence":["Browser automation: medium","Network access: medium","Secrets or environment access: high"]},{"id":"alternatives","label":"Alternatives available","status":"info","score":55,"required_for_auto_install":false,"detail":"No close alternatives were found in the current shortlist.","evidence":[]}],"endpoints":{"web":"https://www.openagentskill.com/skills/tech-leads-club-frontend-blueprint/evals","api":"/api/agent/evals?slug=tech-leads-club-frontend-blueprint","text":"/api/agent/evals?slug=tech-leads-club-frontend-blueprint&format=text"}},"agent_readable_metadata":{"version":"openagentskill-agent-metadata-v2","skill":{"slug":"tech-leads-club-frontend-blueprint","name":"frontend-blueprint","description":"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. 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 triggers on \"build me a UI\", \"design a page\", \"create a component\", \"improve this layout\", \"make this look better\", \"frontend\", \"interface\", \"redesign\", or when the user provides mockups, screenshots, or design references. Do NOT use for backend logic, API design, database schemas, or non-visual code tasks.","category":"research","url":"https://www.openagentskill.com/skills/tech-leads-club-frontend-blueprint","repository":"https://github.com/tech-leads-club/agent-skills/tree/main/packages/skills-catalog/skills/(architecture)/frontend-blueprint","github_repo":"tech-leads-club/agent-skills"},"suited_tasks":["GitHub automation workflows","Claude Code teams","teams that value GitHub adoption signals","Inspect repository metadata","Compare code changes","Write concise engineering summaries","Inspect visual requirements","Generate reusable assets"],"suited_agents":["Codex","Claude Code","Cursor","OpenAgentSkill CLI","Browser agents","CLI"],"install":{"command":"npx skills add tech-leads-club/agent-skills --skill frontend-blueprint","ready":true,"targets":[{"id":"openagentskill-cli","label":"CLI","kind":"command","value":"npx --yes https://github.com/Leon-Drq/openagentskill/releases/download/cli-v0.3.0/openagentskill-0.3.0.tgz add tech-leads-club-frontend-blueprint"},{"id":"codex","label":"Codex","kind":"agent-prompt","value":"Install the \"frontend-blueprint\" agent skill from https://github.com/tech-leads-club/agent-skills/tree/main/packages/skills-catalog/skills/(architecture)/frontend-blueprint. Read its SKILL.md or equivalent instructions first, install only the files needed for this workspace, and summarize any required setup before using it. Skill purpose: 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. 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 triggers on \"build me a UI\", \"design a page\", \"create a component\", \"improve this layout\", \"make this look better\", \"frontend\", \"interface\", \"redesign\", or when the user provides mockups, screenshots, or design references. Do NOT use for backend logic, API design, database schemas, or non-visual code tasks. After the install attempt, report the result to https://www.openagentskill.com/api/agent/outcome with POST JSON {\"event_id\":\"install_<unique-id>\",\"skill_slug\":\"tech-leads-club-frontend-blueprint\",\"task\":\"Install frontend-blueprint\",\"agent\":\"codex\",\"outcome\":\"success\",\"install_used\":true}. Replace event_id with a unique value and outcome with success or failed. Report success only after the skill is installed and a minimal verification passes."},{"id":"claude-code","label":"Claude Code","kind":"agent-prompt","value":"Add \"frontend-blueprint\" as a Claude Code skill from https://github.com/tech-leads-club/agent-skills/tree/main/packages/skills-catalog/skills/(architecture)/frontend-blueprint. Inspect the skill instructions, place the reusable skill files in the appropriate local skills location for this project, and report the activation steps. Skill purpose: 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. 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 triggers on \"build me a UI\", \"design a page\", \"create a component\", \"improve this layout\", \"make this look better\", \"frontend\", \"interface\", \"redesign\", or when the user provides mockups, screenshots, or design references. Do NOT use for backend logic, API design, database schemas, or non-visual code tasks. After the install attempt, report the result to https://www.openagentskill.com/api/agent/outcome with POST JSON {\"event_id\":\"install_<unique-id>\",\"skill_slug\":\"tech-leads-club-frontend-blueprint\",\"task\":\"Install frontend-blueprint\",\"agent\":\"claude-code\",\"outcome\":\"success\",\"install_used\":true}. Replace event_id with a unique value and outcome with success or failed. Report success only after the skill is installed and a minimal verification passes."},{"id":"cursor","label":"Cursor","kind":"agent-prompt","value":"Turn \"frontend-blueprint\" from https://github.com/tech-leads-club/agent-skills/tree/main/packages/skills-catalog/skills/(architecture)/frontend-blueprint into a reusable Cursor project rule or agent instruction. Preserve the core workflow, adapt paths to this repo, and keep the rule scoped to tasks where it is relevant. Skill purpose: 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. 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 triggers on \"build me a UI\", \"design a page\", \"create a component\", \"improve this layout\", \"make this look better\", \"frontend\", \"interface\", \"redesign\", or when the user provides mockups, screenshots, or design references. Do NOT use for backend logic, API design, database schemas, or non-visual code tasks. After the install attempt, report the result to https://www.openagentskill.com/api/agent/outcome with POST JSON {\"event_id\":\"install_<unique-id>\",\"skill_slug\":\"tech-leads-club-frontend-blueprint\",\"task\":\"Install frontend-blueprint\",\"agent\":\"cursor\",\"outcome\":\"success\",\"install_used\":true}. Replace event_id with a unique value and outcome with success or failed. Report success only after the skill is installed and a minimal verification passes."}],"handoff_url":"https://www.openagentskill.com/api/skills/tech-leads-club-frontend-blueprint/install","manifest_url":"https://www.openagentskill.com/api/registry/manifest/tech-leads-club-frontend-blueprint"},"trust":{"score":73,"label":"Strong shortlist","version":"trust-score-v4","install_policy":"human_review_before_install","evidence":{"stars":"5.1K GitHub stars","repoActivity":"5.1K stars, 469 forks","lastPushed":"7d since push","license":"CC-BY-4.0","repository":"https://github.com/tech-leads-club/agent-skills/tree/main/packages/skills-catalog/skills/(architecture)/frontend-blueprint","install":"npx skills add tech-leads-club/agent-skills --skill frontend-blueprint","installSafety":"standard package or runtime install path","permissionSurface":"secrets or environment access, network or browser access","documentation":"Usable metadata, review docs","agentOutcomes":"No agent outcome data yet"},"outcome_evidence":{"total":0,"successes":0,"failures":0,"not_relevant":0,"success_rate":null,"recent_success_rate":null,"recent_failure_rate":null,"install_attempts":0,"install_success_rate":null,"risk_blocked":0,"setup_required":0,"avg_output_quality":null,"production_outcomes":0,"last_outcome_at":null,"label":"No agent outcome data yet"},"auto_install":{"allowed":false,"sandbox_required":true,"reason":"Human review or sandbox validation is required before automatic installation."},"best_for":["research","agent-skill"],"known_risks":["The SKILL.md excerpt appears truncated in the submission, but the provided content and supporting reference files are coherent and complete enough for evaluation.","Financial research output is not financial advice; require human review before any live investment decision.","Quality score needs review","Permission surface needs review: secrets or environment access, network or browser access","Dependency/runtime risk: credential or environment access, network or browser surface","Permission surface: secrets or environment access, network or browser access"]},"agent_proven":{"version":"agent-proven-v1","score":0,"tier":"unproven","label":"Needs first agent run","summary":"No agent outcome reports yet. Use Resolve, run one narrow sandbox task, then report the result.","metrics":{"totalOutcomes":0,"successfulOutcomes":0,"failedOutcomes":0,"installAttempts":0,"installSuccessRate":null,"successRate":null,"recentSuccessRate":null,"recentFailureRate":null,"riskBlocked":0,"setupRequired":0,"notRelevant":0,"avgOutputQuality":null,"avgTimeToUsefulMs":null,"productionOutcomes":0,"humanReviewRequired":0,"uniqueAgents":0,"lastOutcomeAt":null},"signals":[],"penalties":["No real agent outcome evidence yet"]},"audit":{"score":82,"risk_level":"needs_review","risk_label":"Needs review","warnings":["Dependency or permission surface needs review","Permission surface may require sandboxing","Financial research output is not financial advice; require human review before any live investment decision","The SKILL.md excerpt appears truncated in the submission, but the provided content and supporting reference files are coherent and complete enough for evaluation.","No explicit instruction to ignore untrusted instructions embedded in user-provided references, screenshots, or URLs.","Financial research output is not financial advice; require human review before any live investment decision.","Quality score needs review","Permission surface needs review: secrets or environment access, network or browser access"]},"safety_gate":{"tier":"experimental","label":"Experimental","auto_install_policy":"review","auto_install_allowed":false,"human_review_required":true,"blocked":false,"recommended_action":"Test manually in an isolated workspace and compare against safer alternatives."},"quality":{"score":84,"label":"Strong"},"supply":{"track":"Research and knowledge work","scenario":"Research agents","maintenance":"7d since push","risk":"Needs review"},"alternative_skills":[],"do_not_use_when":["teams that need a vendor-supported SLA","production agents without a repository review","The SKILL.md excerpt appears truncated in the submission, but the provided content and supporting reference files are coherent and complete enough for evaluation.","No OpenAgentSkill engagement data yet","High-risk permission hints: Secrets or environment access","Dependency or permission surface needs review","Permission surface may require sandboxing","Financial research output is not financial advice; require human review before any live investment decision"],"agent_contract":{"task_input":"Use frontend-blueprint in an agent workflow","recommended_action":"Test manually in an isolated workspace and compare against safer alternatives.","install_policy":"review","minimum_review_before_use":["Trust: 73/100 Strong shortlist","Audit: 82/100 Needs review","Safety: 50/100 Avoid automatic install","Review repository, license, install command, and permission surface before production use."],"expected_agent_output":{"selected_skill":"tech-leads-club-frontend-blueprint (frontend-blueprint)","install_command":"npx skills add tech-leads-club/agent-skills --skill frontend-blueprint","risk_summary":"Needs review; Experimental; Review before production","verification_result":"Report the smallest successful task, files touched, warnings, and any missing setup."}},"outcome_feedback":{"endpoint":"https://www.openagentskill.com/api/agent/outcome","method":"POST","requires_resolve_event_id":true,"event_id_source":"Use install_receipt.outcome_feedback.event_id or feedback.event_id returned by /api/agent/resolve for the current task.","expected_outcomes":["success","failed","not_relevant","blocked_by_risk","setup_required"],"payload_template":{"event_id":"<install_receipt.outcome_feedback.event_id or feedback.event_id from /api/agent/resolve>","skill_slug":"tech-leads-club-frontend-blueprint","task":"Use frontend-blueprint in an agent workflow","agent":"codex","outcome":"success","install_used":true,"risk_blocked":false,"setup_required":false,"task_success":true,"output_quality":4,"error_type":null,"human_review_required":false,"workspace":"sandbox","time_to_useful_ms":120000,"notes":"Report the smallest successful task, setup friction, files touched, and risk notes."}},"endpoints":{"web":"https://www.openagentskill.com/skills/tech-leads-club-frontend-blueprint","api":"https://www.openagentskill.com/api/agent/skills/tech-leads-club-frontend-blueprint","audit":"https://www.openagentskill.com/skills/tech-leads-club-frontend-blueprint/audit","eval":"https://www.openagentskill.com/api/agent/evals?slug=tech-leads-club-frontend-blueprint&task=Use%20frontend-blueprint%20in%20an%20agent%20workflow&max_risk=medium","resolve":"https://www.openagentskill.com/api/agent/resolve?task=Use%20frontend-blueprint%20in%20an%20agent%20workflow&agent=codex&max_risk=medium","receipt":"https://www.openagentskill.com/api/agent/receipt?task=Use%20frontend-blueprint%20in%20an%20agent%20workflow&agent=codex&max_risk=medium&format=text","install":"https://www.openagentskill.com/api/skills/tech-leads-club-frontend-blueprint/install","manifest":"https://www.openagentskill.com/api/registry/manifest/tech-leads-club-frontend-blueprint"}},"machine_metadata":{"version":"openagentskill-agent-metadata-v2","skill":{"slug":"tech-leads-club-frontend-blueprint","name":"frontend-blueprint","description":"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. 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 triggers on \"build me a UI\", \"design a page\", \"create a component\", \"improve this layout\", \"make this look better\", \"frontend\", \"interface\", \"redesign\", or when the user provides mockups, screenshots, or design references. Do NOT use for backend logic, API design, database schemas, or non-visual code tasks.","category":"research","url":"https://www.openagentskill.com/skills/tech-leads-club-frontend-blueprint","repository":"https://github.com/tech-leads-club/agent-skills/tree/main/packages/skills-catalog/skills/(architecture)/frontend-blueprint","github_repo":"tech-leads-club/agent-skills"},"suited_tasks":["GitHub automation workflows","Claude Code teams","teams that value GitHub adoption signals","Inspect repository metadata","Compare code changes","Write concise engineering summaries","Inspect visual requirements","Generate reusable assets"],"suited_agents":["Codex","Claude Code","Cursor","OpenAgentSkill CLI","Browser agents","CLI"],"install":{"command":"npx skills add tech-leads-club/agent-skills --skill frontend-blueprint","ready":true,"targets":[{"id":"openagentskill-cli","label":"CLI","kind":"command","value":"npx --yes https://github.com/Leon-Drq/openagentskill/releases/download/cli-v0.3.0/openagentskill-0.3.0.tgz add tech-leads-club-frontend-blueprint"},{"id":"codex","label":"Codex","kind":"agent-prompt","value":"Install the \"frontend-blueprint\" agent skill from https://github.com/tech-leads-club/agent-skills/tree/main/packages/skills-catalog/skills/(architecture)/frontend-blueprint. Read its SKILL.md or equivalent instructions first, install only the files needed for this workspace, and summarize any required setup before using it. Skill purpose: 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. 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 triggers on \"build me a UI\", \"design a page\", \"create a component\", \"improve this layout\", \"make this look better\", \"frontend\", \"interface\", \"redesign\", or when the user provides mockups, screenshots, or design references. Do NOT use for backend logic, API design, database schemas, or non-visual code tasks. After the install attempt, report the result to https://www.openagentskill.com/api/agent/outcome with POST JSON {\"event_id\":\"install_<unique-id>\",\"skill_slug\":\"tech-leads-club-frontend-blueprint\",\"task\":\"Install frontend-blueprint\",\"agent\":\"codex\",\"outcome\":\"success\",\"install_used\":true}. Replace event_id with a unique value and outcome with success or failed. Report success only after the skill is installed and a minimal verification passes."},{"id":"claude-code","label":"Claude Code","kind":"agent-prompt","value":"Add \"frontend-blueprint\" as a Claude Code skill from https://github.com/tech-leads-club/agent-skills/tree/main/packages/skills-catalog/skills/(architecture)/frontend-blueprint. Inspect the skill instructions, place the reusable skill files in the appropriate local skills location for this project, and report the activation steps. Skill purpose: 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. 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 triggers on \"build me a UI\", \"design a page\", \"create a component\", \"improve this layout\", \"make this look better\", \"frontend\", \"interface\", \"redesign\", or when the user provides mockups, screenshots, or design references. Do NOT use for backend logic, API design, database schemas, or non-visual code tasks. After the install attempt, report the result to https://www.openagentskill.com/api/agent/outcome with POST JSON {\"event_id\":\"install_<unique-id>\",\"skill_slug\":\"tech-leads-club-frontend-blueprint\",\"task\":\"Install frontend-blueprint\",\"agent\":\"claude-code\",\"outcome\":\"success\",\"install_used\":true}. Replace event_id with a unique value and outcome with success or failed. Report success only after the skill is installed and a minimal verification passes."},{"id":"cursor","label":"Cursor","kind":"agent-prompt","value":"Turn \"frontend-blueprint\" from https://github.com/tech-leads-club/agent-skills/tree/main/packages/skills-catalog/skills/(architecture)/frontend-blueprint into a reusable Cursor project rule or agent instruction. Preserve the core workflow, adapt paths to this repo, and keep the rule scoped to tasks where it is relevant. Skill purpose: 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. 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 triggers on \"build me a UI\", \"design a page\", \"create a component\", \"improve this layout\", \"make this look better\", \"frontend\", \"interface\", \"redesign\", or when the user provides mockups, screenshots, or design references. Do NOT use for backend logic, API design, database schemas, or non-visual code tasks. After the install attempt, report the result to https://www.openagentskill.com/api/agent/outcome with POST JSON {\"event_id\":\"install_<unique-id>\",\"skill_slug\":\"tech-leads-club-frontend-blueprint\",\"task\":\"Install frontend-blueprint\",\"agent\":\"cursor\",\"outcome\":\"success\",\"install_used\":true}. Replace event_id with a unique value and outcome with success or failed. Report success only after the skill is installed and a minimal verification passes."}],"handoff_url":"https://www.openagentskill.com/api/skills/tech-leads-club-frontend-blueprint/install","manifest_url":"https://www.openagentskill.com/api/registry/manifest/tech-leads-club-frontend-blueprint"},"trust":{"score":73,"label":"Strong shortlist","version":"trust-score-v4","install_policy":"human_review_before_install","evidence":{"stars":"5.1K GitHub stars","repoActivity":"5.1K stars, 469 forks","lastPushed":"7d since push","license":"CC-BY-4.0","repository":"https://github.com/tech-leads-club/agent-skills/tree/main/packages/skills-catalog/skills/(architecture)/frontend-blueprint","install":"npx skills add tech-leads-club/agent-skills --skill frontend-blueprint","installSafety":"standard package or runtime install path","permissionSurface":"secrets or environment access, network or browser access","documentation":"Usable metadata, review docs","agentOutcomes":"No agent outcome data yet"},"outcome_evidence":{"total":0,"successes":0,"failures":0,"not_relevant":0,"success_rate":null,"recent_success_rate":null,"recent_failure_rate":null,"install_attempts":0,"install_success_rate":null,"risk_blocked":0,"setup_required":0,"avg_output_quality":null,"production_outcomes":0,"last_outcome_at":null,"label":"No agent outcome data yet"},"auto_install":{"allowed":false,"sandbox_required":true,"reason":"Human review or sandbox validation is required before automatic installation."},"best_for":["research","agent-skill"],"known_risks":["The SKILL.md excerpt appears truncated in the submission, but the provided content and supporting reference files are coherent and complete enough for evaluation.","Financial research output is not financial advice; require human review before any live investment decision.","Quality score needs review","Permission surface needs review: secrets or environment access, network or browser access","Dependency/runtime risk: credential or environment access, network or browser surface","Permission surface: secrets or environment access, network or browser access"]},"agent_proven":{"version":"agent-proven-v1","score":0,"tier":"unproven","label":"Needs first agent run","summary":"No agent outcome reports yet. Use Resolve, run one narrow sandbox task, then report the result.","metrics":{"totalOutcomes":0,"successfulOutcomes":0,"failedOutcomes":0,"installAttempts":0,"installSuccessRate":null,"successRate":null,"recentSuccessRate":null,"recentFailureRate":null,"riskBlocked":0,"setupRequired":0,"notRelevant":0,"avgOutputQuality":null,"avgTimeToUsefulMs":null,"productionOutcomes":0,"humanReviewRequired":0,"uniqueAgents":0,"lastOutcomeAt":null},"signals":[],"penalties":["No real agent outcome evidence yet"]},"audit":{"score":82,"risk_level":"needs_review","risk_label":"Needs review","warnings":["Dependency or permission surface needs review","Permission surface may require sandboxing","Financial research output is not financial advice; require human review before any live investment decision","The SKILL.md excerpt appears truncated in the submission, but the provided content and supporting reference files are coherent and complete enough for evaluation.","No explicit instruction to ignore untrusted instructions embedded in user-provided references, screenshots, or URLs.","Financial research output is not financial advice; require human review before any live investment decision.","Quality score needs review","Permission surface needs review: secrets or environment access, network or browser access"]},"safety_gate":{"tier":"experimental","label":"Experimental","auto_install_policy":"review","auto_install_allowed":false,"human_review_required":true,"blocked":false,"recommended_action":"Test manually in an isolated workspace and compare against safer alternatives."},"quality":{"score":84,"label":"Strong"},"supply":{"track":"Research and knowledge work","scenario":"Research agents","maintenance":"7d since push","risk":"Needs review"},"alternative_skills":[],"do_not_use_when":["teams that need a vendor-supported SLA","production agents without a repository review","The SKILL.md excerpt appears truncated in the submission, but the provided content and supporting reference files are coherent and complete enough for evaluation.","No OpenAgentSkill engagement data yet","High-risk permission hints: Secrets or environment access","Dependency or permission surface needs review","Permission surface may require sandboxing","Financial research output is not financial advice; require human review before any live investment decision"],"agent_contract":{"task_input":"Use frontend-blueprint in an agent workflow","recommended_action":"Test manually in an isolated workspace and compare against safer alternatives.","install_policy":"review","minimum_review_before_use":["Trust: 73/100 Strong shortlist","Audit: 82/100 Needs review","Safety: 50/100 Avoid automatic install","Review repository, license, install command, and permission surface before production use."],"expected_agent_output":{"selected_skill":"tech-leads-club-frontend-blueprint (frontend-blueprint)","install_command":"npx skills add tech-leads-club/agent-skills --skill frontend-blueprint","risk_summary":"Needs review; Experimental; Review before production","verification_result":"Report the smallest successful task, files touched, warnings, and any missing setup."}},"outcome_feedback":{"endpoint":"https://www.openagentskill.com/api/agent/outcome","method":"POST","requires_resolve_event_id":true,"event_id_source":"Use install_receipt.outcome_feedback.event_id or feedback.event_id returned by /api/agent/resolve for the current task.","expected_outcomes":["success","failed","not_relevant","blocked_by_risk","setup_required"],"payload_template":{"event_id":"<install_receipt.outcome_feedback.event_id or feedback.event_id from /api/agent/resolve>","skill_slug":"tech-leads-club-frontend-blueprint","task":"Use frontend-blueprint in an agent workflow","agent":"codex","outcome":"success","install_used":true,"risk_blocked":false,"setup_required":false,"task_success":true,"output_quality":4,"error_type":null,"human_review_required":false,"workspace":"sandbox","time_to_useful_ms":120000,"notes":"Report the smallest successful task, setup friction, files touched, and risk notes."}},"endpoints":{"web":"https://www.openagentskill.com/skills/tech-leads-club-frontend-blueprint","api":"https://www.openagentskill.com/api/agent/skills/tech-leads-club-frontend-blueprint","audit":"https://www.openagentskill.com/skills/tech-leads-club-frontend-blueprint/audit","eval":"https://www.openagentskill.com/api/agent/evals?slug=tech-leads-club-frontend-blueprint&task=Use%20frontend-blueprint%20in%20an%20agent%20workflow&max_risk=medium","resolve":"https://www.openagentskill.com/api/agent/resolve?task=Use%20frontend-blueprint%20in%20an%20agent%20workflow&agent=codex&max_risk=medium","receipt":"https://www.openagentskill.com/api/agent/receipt?task=Use%20frontend-blueprint%20in%20an%20agent%20workflow&agent=codex&max_risk=medium&format=text","install":"https://www.openagentskill.com/api/skills/tech-leads-club-frontend-blueprint/install","manifest":"https://www.openagentskill.com/api/registry/manifest/tech-leads-club-frontend-blueprint"}},"supply_profile":{"track":{"slug":"research","label":"Research and knowledge work","shortLabel":"Research","description":"Deep research, source comparison, literature review, RAG, knowledge search, and reports."},"scenario":{"label":"Research agents","description":"I need my agent to research a topic, compare sources, and produce a concise report.","useCases":[{"slug":"github-automation","title":"GitHub automation"},{"slug":"design-creative","title":"Design and creative"},{"slug":"coding-agents","title":"Coding agents"}]},"applicableAgents":["Claude Code","Browser agents","CLI","Codex","Cursor"],"install":{"ready":true,"command":"npx skills add tech-leads-club/agent-skills --skill frontend-blueprint","primaryTarget":"CLI","targetCount":4},"githubQuality":{"stars":5107,"starsLabel":"5.1K","forks":469,"license":"CC-BY-4.0","qualityScore":84,"trustScore":73,"auditScore":82},"maintenance":{"status":"fresh","label":"7d since push","daysSincePush":7,"lastPushedAt":"2026-09-01T02:48:39+00:00"},"risk":{"level":"needs_review","label":"Needs review","requiresReview":true,"notes":["Dependency or permission surface needs review","Permission surface may require sandboxing","Financial research output is not financial advice; require human review before any live investment decision","The SKILL.md excerpt appears truncated in the submission, but the provided content and supporting reference files are coherent and complete enough for evaluation.","No explicit instruction to ignore untrusted instructions embedded in user-provided references, screenshots, or URLs."]},"coverageTags":["Research","Research agents","agent-skill"]},"audit":{"audit_score":82,"risk_level":"needs_review","risk_label":"Needs review","quality_score":84,"trust_score":73,"maintenance_score":100,"security_score":75,"install_score":92,"warnings":["Dependency or permission surface needs review","Permission surface may require sandboxing","Financial research output is not financial advice; require human review before any live investment decision","The SKILL.md excerpt appears truncated in the submission, but the provided content and supporting reference files are coherent and complete enough for evaluation.","No explicit instruction to ignore untrusted instructions embedded in user-provided references, screenshots, or URLs.","Financial research output is not financial advice; require human review before any live investment decision.","Quality score needs review","Permission surface needs review: secrets or environment access, network or browser access","Dependency/runtime risk: credential or environment access, network or browser surface","Permission surface: secrets or environment access, network or browser access"]},"quality_signals":{"model":"v2","star_score":25.96,"usage_score":0,"review_score":5.55,"metadata_score":3,"freshness_score":15},"platforms":["Claude Code","Browser agents"],"use_cases":[{"slug":"github-automation","title":"GitHub automation","url":"https://www.openagentskill.com/use-cases/github-automation"},{"slug":"design-creative","title":"Design and creative","url":"https://www.openagentskill.com/use-cases/design-creative"},{"slug":"coding-agents","title":"Coding agents","url":"https://www.openagentskill.com/use-cases/coding-agents"},{"slug":"browser-automation","title":"Browser automation","url":"https://www.openagentskill.com/use-cases/browser-automation"}],"stacks":[{"slug":"frontend-product-ui","title":"Frontend and UI","url":"https://www.openagentskill.com/collections/frontend-product-ui"},{"slug":"browser-qa-agent","title":"Browser QA agent","url":"https://www.openagentskill.com/collections/browser-qa-agent"},{"slug":"web-data-pipeline","title":"Web data pipeline","url":"https://www.openagentskill.com/collections/web-data-pipeline"}],"install":"npx skills add tech-leads-club/agent-skills --skill frontend-blueprint","install_targets":[{"id":"openagentskill-cli","label":"CLI","title":"OpenAgentSkill CLI","kind":"command","value":"npx --yes https://github.com/Leon-Drq/openagentskill/releases/download/cli-v0.3.0/openagentskill-0.3.0.tgz add tech-leads-club-frontend-blueprint","description":"Resolve policy, run the source installer safely, and report a verified install receipt.","copyLabel":"Copy command"},{"id":"codex","label":"Codex","title":"Codex install prompt","kind":"agent-prompt","value":"Install the \"frontend-blueprint\" agent skill from https://github.com/tech-leads-club/agent-skills/tree/main/packages/skills-catalog/skills/(architecture)/frontend-blueprint. Read its SKILL.md or equivalent instructions first, install only the files needed for this workspace, and summarize any required setup before using it. Skill purpose: 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. 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 triggers on \"build me a UI\", \"design a page\", \"create a component\", \"improve this layout\", \"make this look better\", \"frontend\", \"interface\", \"redesign\", or when the user provides mockups, screenshots, or design references. Do NOT use for backend logic, API design, database schemas, or non-visual code tasks. After the install attempt, report the result to https://www.openagentskill.com/api/agent/outcome with POST JSON {\"event_id\":\"install_<unique-id>\",\"skill_slug\":\"tech-leads-club-frontend-blueprint\",\"task\":\"Install frontend-blueprint\",\"agent\":\"codex\",\"outcome\":\"success\",\"install_used\":true}. Replace event_id with a unique value and outcome with success or failed. Report success only after the skill is installed and a minimal verification passes.","description":"Give Codex a repo-aware install prompt when the skill is not available through a local CLI.","copyLabel":"Copy prompt"},{"id":"claude-code","label":"Claude Code","title":"Claude Code skill prompt","kind":"agent-prompt","value":"Add \"frontend-blueprint\" as a Claude Code skill from https://github.com/tech-leads-club/agent-skills/tree/main/packages/skills-catalog/skills/(architecture)/frontend-blueprint. Inspect the skill instructions, place the reusable skill files in the appropriate local skills location for this project, and report the activation steps. Skill purpose: 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. 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 triggers on \"build me a UI\", \"design a page\", \"create a component\", \"improve this layout\", \"make this look better\", \"frontend\", \"interface\", \"redesign\", or when the user provides mockups, screenshots, or design references. Do NOT use for backend logic, API design, database schemas, or non-visual code tasks. After the install attempt, report the result to https://www.openagentskill.com/api/agent/outcome with POST JSON {\"event_id\":\"install_<unique-id>\",\"skill_slug\":\"tech-leads-club-frontend-blueprint\",\"task\":\"Install frontend-blueprint\",\"agent\":\"claude-code\",\"outcome\":\"success\",\"install_used\":true}. Replace event_id with a unique value and outcome with success or failed. Report success only after the skill is installed and a minimal verification passes.","description":"Use this prompt to ask Claude Code to add the skill and explain the local activation steps.","copyLabel":"Copy prompt"},{"id":"cursor","label":"Cursor","title":"Cursor rule prompt","kind":"agent-prompt","value":"Turn \"frontend-blueprint\" from https://github.com/tech-leads-club/agent-skills/tree/main/packages/skills-catalog/skills/(architecture)/frontend-blueprint into a reusable Cursor project rule or agent instruction. Preserve the core workflow, adapt paths to this repo, and keep the rule scoped to tasks where it is relevant. Skill purpose: 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. 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 triggers on \"build me a UI\", \"design a page\", \"create a component\", \"improve this layout\", \"make this look better\", \"frontend\", \"interface\", \"redesign\", or when the user provides mockups, screenshots, or design references. Do NOT use for backend logic, API design, database schemas, or non-visual code tasks. After the install attempt, report the result to https://www.openagentskill.com/api/agent/outcome with POST JSON {\"event_id\":\"install_<unique-id>\",\"skill_slug\":\"tech-leads-club-frontend-blueprint\",\"task\":\"Install frontend-blueprint\",\"agent\":\"cursor\",\"outcome\":\"success\",\"install_used\":true}. Replace event_id with a unique value and outcome with success or failed. Report success only after the skill is installed and a minimal verification passes.","description":"Use this when installing as Cursor project rules or reusable agent instructions.","copyLabel":"Copy prompt"}],"repository":"https://github.com/tech-leads-club/agent-skills/tree/main/packages/skills-catalog/skills/(architecture)/frontend-blueprint","github_repo":"tech-leads-club/agent-skills","version":"1.0.0","license":"CC-BY-4.0","urls":{"web":"https://www.openagentskill.com/skills/tech-leads-club-frontend-blueprint","repository":"https://github.com/tech-leads-club/agent-skills/tree/main/packages/skills-catalog/skills/(architecture)/frontend-blueprint","api":"/api/agent/skills/tech-leads-club-frontend-blueprint","install_api":"/api/skills/tech-leads-club-frontend-blueprint/install"},"meta":{"created_at":"2026-09-02T05:43:46.640878+00:00","updated_at":"2026-09-02T05:43:46.768162+00:00","agent_friendly":true}}