skills.rest
GovTechSG
GovTechSGOFFICIAL
Explore all skills by this author →
WebsiteGitHub

component-authoring

Scaffold SGDS web components with tests, Storybook, and ADRs.

18|10|Updated Aug 30, 2022
Search Tags:#workflow#tdd#adr#scaffolding#component#authoring#open-wc
One-click install
npx skills add https://github.com/GovTechSG/sgds-web-component --skill component-authoring-govtechsg
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-authoring
Source: https://github.com/GovTechSG/sgds-web-component/tree/main/.github/skills/component-authoring
Command: npx skills add https://github.com/GovTechSG/sgds-web-component --skill component-authoring-govtechsg

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a structured, end-to-end workflow for composing or extending SGDS web components, helping teams scaffold, test, and document components consistently.

Core Features & Use Cases

  • Stepwise guidance from scope clarification to scaffolding, TDD, and release readiness.
  • Enforces best practices: code conventions, Architecture Decision Records, playgrounds, builds, and Storybook readiness.
  • Use case: a developer wants to create a new sgds-* component with a repeatable, auditable process that includes tests and documentation.

Quick Start

Clarify the component scope and run the scaffolding command to bootstrap a new SGDS web component.

Frequently Asked Questions about component-authoring

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

FAQPage Schema
How do I scaffold a new SGDS web component from scratch?▼

Scaffolding a new SGDS web component involves running a bootstrap command after clarifying the component scope. This creates the foundational project structure and enforces coding conventions for consistent development.

What is the best way to add features to an existing sgds-* component?▼

Adding features to an existing sgds-* component follows a structured authoring workflow that includes Test-Driven Development (TDD) and Architecture Decision Records (ADR). This ensures new capabilities are tested, documented, and auditable before release.

How does Test-Driven Development (TDD) work when authoring web components?▼

Test-Driven Development (TDD) in component authoring requires writing tests before implementing the component logic. This Skill enforces TDD as a core step in the workflow, ensuring components meet functional requirements and maintain build readiness.

Do I need Architecture Decision Records (ADR) for SGDS component development?▼

Architecture Decision Records (ADR) are required for SGDS component development to document architectural choices. The authoring workflow enforces ADR references, providing an auditable process that tracks why specific technical decisions were made.

Can I use this workflow to set up Storybook for my web components?▼

Yes, you can use this workflow to set up Storybook for web components. The process enforces Storybook readiness alongside playground and build configurations, ensuring components are properly documented and visually testable.

What limitations exist when using open-wc for component scaffolding?▼

When using open-wc for component scaffolding, the workflow is constrained to SGDS coding conventions and structured steps. Developers must follow the enforced TDD and ADR processes, which may limit rapid prototyping outside these guidelines.

Related Skills

Explore More Software Engineering Skills→
TbK0ngTbK0ng

trellis-bootstrap

Initialize Trellis AI workflow scaffolding with .trellis structure, memory, and CLI hooks.

Community
Intermediate
GovTechSGGovTechSG
18

sgds-typography

Standardize SGDS typography with sgds: prefixes for font styles.

Official
Intermediate
alekspetrovalekspetrov
196

visual-regression

Automate visual-regression testing setup for Storybook components with CI workflows.

Community
Advanced
GovTechSGGovTechSG
18

sgds-getting-started

Bootstrap SGDS projects with fonts, foundation CSS, utilities, components, and app layouts.

Official
Intermediate