Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions .github/workflows/validate.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
name: Validate skill

on:
push:
pull_request:

permissions:
contents: read

concurrency:
group: skill-${{ github.workflow }}-${{ github.ref }}
cancel-in-progress: true

jobs:
validate:
runs-on: ubuntu-latest
timeout-minutes: 10
steps:
- uses: actions/checkout@11d5960a326750d5838078e36cf38b85af677262 # v4
with:
persist-credentials: false
- uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
with:
node-version: '22'
- run: npm ci --ignore-scripts --no-audit --no-fund
- run: npm test
- run: npm run build
- run: git diff --exit-code -- SKILL.md docs/compatibility-summary.md docs/evidence-index.md
- run: npm run pack:check
17 changes: 17 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,23 @@
All notable changes to this project are documented here. Format follows
[Keep a Changelog](https://keepachangelog.com/); versions follow [SemVer](https://semver.org/).

## [Unreleased]

### Added
- Five-part execution contract with scoped inputs, review-only defaults, verification gates, explicit result states, and non-destructive recovery.
- Optional, version-pinned Animate.css reference covering integration, accessibility, cancellation, bundle delivery, license differences, migration, and rollback. No Animate.css dependency or vendored library source.
- Eleven content regression tests and read-only CI for validation, reproducible generation, and the six-file package contract.

### Fixed
- Invalid nested vendor `@import` example and incomplete cascade-layer precedence explanation.
- Global near-zero reduced-motion reset that left delays and override conflicts unaddressed.
- Disclosure guidance that treated visual collapse as sufficient semantic state.
- Snippet targets incorrectly subjected to workspace path checks, and review-only payload/finalization instructions that still required edits.
- Normal-motion feedback defaults overriding Animate.css delay/repeat/infinite helpers and inherited timing variables.

### Evidence
- New motion references reviewed September 4, 2026. The broader compatibility snapshot remains August 2026; no release version or npm publication is implied.

## [1.3.0] - 2026-08-26

### Added
Expand Down
14 changes: 11 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ ln -sf "$(pwd)/node_modules/css-pro-tips/SKILL.md" ~/.claude/skills/css-protips/

## What your agent gets

The skill starts with the decisions that shape good CSS, then supplies implementation guidance and compatibility evidence.
The skill starts with an execution contract: activation and negative triggers, validated inputs, gated execution, acceptance criteria, and failure recovery. Review mode and no dependency changes are the defaults. It then supplies CSS decisions, implementation guidance, and compatibility evidence.

| Decision | Guidance |
|---|---|
Expand All @@ -56,7 +56,7 @@ The skill starts with the decisions that shape good CSS, then supplies implement
| Typography | Unitless line height, bounded `clamp()` type, `text-wrap`, `text-box`, font loading, subsetting, and fallback metrics |
| Color | Semantic themes, `oklch()`, `color-mix()`, `light-dark()`, relative-color fallbacks, and forced-colors behavior |
| State | `:focus-visible`, `:has()`, native form state, `:open`, popovers, customizable select, and real ARIA/data state |
| Motion | Ordinary transitions, disclosures, `@starting-style`, `allow-discrete`, View Transitions, scroll-driven animation limits, and reduced-motion policy |
| Motion | Native transitions, semantic disclosures, optional Animate.css presets, cancellation-safe lifecycle guidance, no-motion/print baselines, View Transitions, and scroll-driven animation limits |
| Accessibility | Focus, contrast, forced colors, reduced transparency, zoom, reflow, keyboard behavior, and semantic HTML |
| Performance | Static output, CSS delivery, critical CSS, fonts, `content-visibility`, and profiling instead of selector folklore |
| Tooling | CSS Modules, Tailwind v4, Sass/Less relevance, PostCSS, Autoprefixer, Browserslist, and Stylelint |
Expand All @@ -81,6 +81,12 @@ It works with Claude Code, Codex CLI, Cursor, OpenCode, Pi, Kiro, and other tool

Cursor uses `.mdc` rules. Copy the file to `.cursor/rules/css-protips.mdc`, then add Cursor frontmatter for the CSS and component file types you want it to match.

## Animate.css reference

The animation module references [Animate.css](https://animate.style/) without adding it as a package dependency. It covers the v4 class prefix, timing variables, single-owner imports, reduced-motion/print handling, cancellation and missing-CSS paths, production bundle checks, and migration/rollback.

The reference was reviewed on September 4, 2026 against the `v4.1.1` source tag. That tag's license is MIT; the live website states a different license. Check the exact distributed artifact and the project's dependency policy before adopting it. This is a versioned reference, not a claim that `4.1.1` is the latest release.

## Compatibility and evidence

- Package version: [`1.3.0`](./package.json)
Expand All @@ -102,7 +108,9 @@ npm test
npm run pack:check
```

`npm run build` regenerates `SKILL.md` and the two maintainer projections. `npm test` rejects stale generated output, invalid frontmatter, broken references, source-contract drift, release metadata drift, and unexpected package contents. The published npm package still contains only the one-file agent interface plus normal package metadata.
`npm run build` regenerates `SKILL.md` and the two maintainer projections. `npm test` rejects stale generated output, invalid frontmatter, broken references, source-contract drift, release metadata drift, and unexpected package contents. It also checks the five-part execution contract, optional Animate.css guidance, versioned evidence, reduced-motion safeguards, and top-level vendor imports. GitHub Actions runs these checks with read-only repository permissions. The published npm package still contains only the one-file agent interface plus normal package metadata.

The [September 2026 review](./docs/review-2026-09-04.md) records confirmed findings, verification scope, and remaining limitations. The broader browser-compatibility snapshot above remains August 2026; adding animation references does not revalidate every browser claim.

CSS Pro-Tips is maintained by [elkaix](https://github.com/elkaix) under the [PyModel](https://github.com/PyModel) organization.

Expand Down
Loading
Loading