new-template

Creates a template screen from the design system and registers it across all tracking surfaces.

1|Updated Feb 14, 2026
One-click install
npx skills add https://github.com/robritacca-dotcom/design-system --skill new-template-robritacca-dotcom
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: new-template
Source: https://github.com/robritacca-dotcom/design-system/tree/main/.claude/skills/new-template
Command: npx skills add https://github.com/robritacca-dotcom/design-system --skill new-template-robritacca-dotcom

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Adding a new template screen to the portfolio site requires more than writing the component: the screen must follow the design system's composition rules and be registered in three separate lists (navigation, chromeless routes, corpus exclusions), where a missed entry fails silently or breaks the build. ## Core Features & Use Cases - Convention-guided composition: Reads design.md's template and composition rules plus live exemplar implementations before writing any code, so the new screen matches the family's established patterns. - Complete implementation scaffolding: Creates the template component with CSS module, the route's page.tsx and layout.tsx, and viewport sizing via the --layout-viewport-height token. - Three-list registration: Adds the screen to templatesSidebarLinks, CHROMELESS_ROUTES, and EXCLUDED_ROUTES in one change, satisfying the build-time coverage gates. - Use Case: Ask to add a kanban template, and the skill mirrors the nearest exemplar, builds the screen with fictional demo data, wires the route, and registers it so the index carousel, sitemap, and chat-corpus validation all pick it up. ## Quick Start Ask the assistant to add a new template screen, for example: add a kanban board template to the site.

Frequently Asked Questions about new-template

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a new template screen to the site?

Invoke the skill with a phrase like "add a [X] template". It reads the design.md composition rules and the nearest live exemplar, builds the component and route under website/src, then registers the screen in the navigation, chromeless, and corpus-exclusion lists.

What is the difference between a template and a component in this design system?

A template is a website surface living in website/src that imports the published package; it gets no design.md component spec, Storybook story, or registry entry. If the work is really a new library component, use the new-component skill first.

Why does a new template not appear in the index carousel or sitemap?

The carousel, sidebar, sitemap, and llms.txt all derive from templatesSidebarLinks in website/src/config/navigation.ts. No validator guards that list, so a skipped entry fails silently and the screen never appears anywhere.

Why does the build fail after adding a template route?

The route must be added to CHROMELESS_ROUTES and EXCLUDED_ROUTES. validate-page-summaries.mjs and validate-chat-coverage.mjs read those lists, and a missing entry fails the build demanding a page summary or corpus coverage the screen should not have.

Can template screens use real company data or portrait images?

No. All demo data must be fictional with an invented product name, and demo humans render through the Avatar component's initials fallback rather than portrait imagery. Dates are pinned hand-formatted strings to avoid hydration mismatches.