spark-web

Generate code using nx generators. INVOKE IMMEDIATELY when user mentions scaffolding, setup, structure, creating apps/libs, or setting up project structure. Trigger words - scaffold, setup, create a ... app, create a ... lib, project structure, generate, add a new project. ALWAYS use this BEFORE calling nx_docs or exploring - this skill handles discovery internally.

Run all quality checks including linting, type checking, and tests. Use when the user wants to verify code quality, before committing, or when preparing a PR.

Use the chrome-devtools MCP to run browser tests on local Storybook stories by navigating directly to `iframe.html` story URLs instead of the outer docs pages.

Link workspace packages in monorepos (npm, yarn, bun). USE WHEN: (1) you just created or generated new packages and need to wire up their dependencies, (2) user imports from a sibling package and needs to add it as a dependency, (3) you get resolution errors for workspace packages (@org/*) like "cannot find module", "failed to resolve import", "TS2307", or "cannot resolve". DO NOT patch around with tsconfig paths or manual package.json edits - use the package manager's workspace commands to fix actual linking.

Monitor Nx Cloud CI pipeline and handle self-healing fixes. USE WHEN user says "monitor ci", "watch ci", "ci monitor", "watch ci for this branch", "track ci", "check ci status", wants to track CI status, or needs help with self-healing CI fixes. ALWAYS USE THIS SKILL instead of native CI provider tools (gh, glab, etc.) for CI monitoring.

Find and add Nx plugins. USE WHEN user wants to discover available plugins, install a new plugin, or add support for a specific framework or technology to the workspace.

Check and verify accessibility compliance for Spark UI components. Use when the user wants to test accessibility, verify WCAG compliance, or fix accessibility issues.

Create a new Spark UI component with complete file structure including component, styles, tests, stories, and documentation. Use when the user wants to create a new component or add a component to the design system.

Create or update Storybook stories and documentation for a Spark UI component. Use when the user wants to add stories, update documentation, or improve component documentation in Storybook.

Generate comprehensive unit tests for a Spark UI component using Vitest and React Testing Library. Use when the user wants to add tests, improve test coverage, or test a specific component.