skills.rest
ogc-maps
ogc-mapsOFFICIAL
Explore all skills by this author →
GitHub

add-map-component

Scaffold Storybook UI components with TSX, stories, and barrel exports.

2|Updated Feb 17, 2026
Search Tags:#typescript#scaffold#component#storybook#tailwind#ui-library#map-ui
One-click install
npx skills add https://github.com/ogc-maps/storybook-components --skill add-map-component
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: add-map-component
Source: https://github.com/ogc-maps/storybook-components/tree/main/.claude/skills/add-map-component
Command: npx skills add https://github.com/ogc-maps/storybook-components --skill add-map-component

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The skill standardizes and accelerates the creation of new map UI components within the storybook-components library by enforcing non-maplibre rules, a fully controlled component model, and a Storybook-first workflow.

Core Features & Use Cases

  • Enforces mapui: Tailwind prefix on all classes and no MapLibre dependencies in the library.
  • Generates three essential files: component TSX, Storybook stories, and a barrel index.
  • Validates and exports via main.ts, ensures downstream apps can import the new component.
  • Provides guidance for admin/Panel placement; ensures a deterministic, testable scaffold.

Quick Start

Create a new PascalCase component under packages/map-ui-lib/src/components, add a corresponding .tsx, .stories.tsx, and index.ts, then verify with pnpm build and storybook.

Frequently Asked Questions about add-map-component

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

FAQPage Schema
How do I scaffold a new Storybook component with TypeScript and Tailwind?▼

To scaffold a Storybook component with TypeScript and Tailwind, this skill automates generating the component TSX, Storybook stories, and barrel index files while enforcing the mapui: Tailwind prefix and fully controlled component rules.

What is the best way to add a UI panel to a map-ui library without MapLibre dependencies?▼

The best way to add a UI panel without MapLibre dependencies is using a scaffolding process that enforces non-maplibre rules, generates the required component and story files, and validates exports for downstream apps.

How do I generate a Storybook story and barrel export for a new map UI component?▼

Generating a Storybook story and barrel export for a map UI component is automated by creating a PascalCase directory with corresponding .tsx, .stories.tsx, and index.ts files, then verifying exports via main.ts.

Does the map-ui-lib component scaffold enforce a specific Tailwind prefix?▼

Yes, the map-ui-lib component scaffold enforces the mapui: Tailwind prefix on all generated classes to maintain styling consistency and prevent unscoped CSS from leaking into downstream applications.

Why does my new UI component fail the pnpm build validation?▼

Your UI component might fail pnpm build validation if it lacks a required Storybook story, violates fully controlled component rules, includes MapLibre dependencies, or is missing from the main.ts barrel export.

Related Skills

Explore More Software Engineering Skills→
UiPathUiPath
18

apollo-install

Clone the apollo-ui repository, install dependencies, build packages, and start Storybook on port 6006.

Official
Intermediate
gihwan-devgihwan-dev
1

component-screenshot

Capture Storybook story screenshots as PNG assets by story-id.

Community
Intermediate
AngelP17AngelP17
1

tailwind-design-system

Standardize UI design with Tailwind-based design tokens and component patterns.

Community
Advanced
vecearvecear

component-scaffold-generator

Generate React or Vue component skeletons with TypeScript types, tests, and Storybook stories.

Community
Advanced