skills.rest
adobe
adobeOFFICIAL
Explore all skills by this author →
WebsiteGitHub

code-conformance

Review 2nd-gen component files against project style guides and run linters.

1.5k|261|Updated Nov 19, 2018
Search Tags:#linting#style guide#storybook#web components#stylelint#esLint#Code review
One-click install
npx skills add https://github.com/adobe/spectrum-web-components --skill code-conformance
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: code-conformance
Source: https://github.com/adobe/spectrum-web-components/tree/main/.ai/skills/code-conformance
Command: npx skills add https://github.com/adobe/spectrum-web-components --skill code-conformance

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Auditing Spectrum Web Components 2nd-gen component code against the project's extensive style guides is time-consuming and error-prone when done manually, and inconsistencies slip through code review.

Core Features & Use Cases

  • Automated linting first: Runs ESLint, Stylelint, and Prettier before any manual review, requiring all errors to be resolved.
  • Four review domains: Covers TypeScript, CSS, test files, and Storybook stories, each with explicit checklists tied to the project's CONTRIBUTOR-DOCS style guides.
  • Guideline gap reporting: Surfaces uncovered patterns with file, line, and rationale instead of blocking the review.
  • Use Case: After finishing the testing phase of a component migration, run a conformance audit on the component's TypeScript, CSS, tests, and stories before moving to documentation.

Quick Start

Ask the AI to run conformance checks for a specific component, for example: "Run conformance checks for the button component."

Frequently Asked Questions about code-conformance

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

FAQPage Schema
How do I check code conformance for a Spectrum Web Components component?▼

Run yarn lint for TypeScript and test files, yarn lint:css for CSS, and Prettier to check formatting. After resolving all lint errors, perform the manual review for each domain: TypeScript, CSS, tests, and Storybook stories.

What does a style guide conformance review cover?▼

The review covers four domains: TypeScript (file organization, class structure, decorators, JSDoc), CSS (property ordering, custom properties, anti-patterns), test files (naming, isolation, flaky-test patterns), and Storybook stories (meta fields, section tags, MDX structure).

When should I run a code conformance audit during migration?▼

Run it as part of the migration-conformance sub-task, after Phase 6 (testing) and before Phase 7 (documentation) of a component migration. It also runs before a consistency pass, which delegates its code-conformance check to this workflow.

What happens if the style guide does not cover a pattern in my code?▼

Do not change the guideline or block the review. Instead, surface the gap with the file and line, the uncovered pattern, and a rationale for why it should be added to the guide, formatted as a PR comment.

Can I disable a lint rule that conflicts with my component code?▼

Yes, but add an inline comment with a clear reason for disabling the rule and flag it for reviewer awareness. All other linting errors must be resolved before the manual review begins.

Related Skills

Explore More Software Engineering Skills→
adobeadobe
1.5k

migration-testing

Automate Vitest, Playwright, and Storybook tests for migrated components.

Official
Intermediate
adobeadobe
1.5k

migration-styling

Migrate CSS to 2nd-gen structure with Spectrum 2 tokens and stylelint conformance.

Official
Intermediate
cuiosscuioss
1

cui-javascript-linting

Configure ESLint, Prettier, and StyleLint for JavaScript projects.

Community
Advanced
openclawopenclaw
2.0k

windows-a2ui

Renders A2UI components as native WinUI 3/XAML with two-way data binding.

Official
Advanced