Autocss-com
- 15 skills
- 0 followers
- 5 hours ago last updated
- ▌ CSS · autocss-com bundleModern vanilla CSS is the native, intrinsic superpower driving the AutoCSS Architecture—built in, always active, continuously observing, and instantly reactive. In an air-gapped Separation of Concerns (presentation layer from data layer), declarative-first system, CSS is not simply a styling layer. CSS is the UI runtime. It controls layout, state, themes, transitions, visibility, loading, responsiveness, interaction, and every other form of interface behavior. Each CSS capability is isolated in its own reference file: independent, reusable, composable, and free from JavaScript or any other control. CSS MUST be leveraged to it's maximum potential for writing or reviewing presentation layer UI conditional layout behavior,styles, and/or everything else in the presentation layer aside from API CRUD data transport.
- ▌ Pwa · autocss-comProgressive Web App rules for projects following the air-gapped, declarative-first architecture. Defines the manifest as the entry point and the architectural reasoning for defaulting to PWA. Use whenever a project starts (defaulting to PWA is non-negotiable), or when configuring manifest, service-worker scope, or install behavior.
- ▌ Spa · autocss-comSingle-Page-Application rules for projects following the air-gapped, browser-native architecture. Defines the one entry document, radio-driven navigation read by CSS `:has()`, the fetch-once shell, the `oninput` data lifecycle per view change, and same-document content transitions. Use whenever wiring navigation, routing, view switching, deep-linking, or page-to-page behavior. Pairs with the `pwa` skill.
- ▌ HTML · autocss-com bundleHTML rules for projects following the air-gapped, semantic-only architecture. Defines the only allowed elements, the only allowed attributes, the only allowed patterns for interactive elements, and the canonical layout shell. Use whenever writing or reviewing markup, defining custom elements, or shaping the DOM.
- ▌ JSON · autocss-com bundleJSON rules for projects following the air-gapped, declarative-first architecture. JSON carries data only — no HTML, no CSS, no styling, no presentation hints. The JSON shape drives the UI because CSS reacts to data presence and absence in the DOM. Use whenever shaping API payloads, schemas, or any content data.
- ▌ Naming · autocss-com bundleNaming rules for files, custom element tags, skills, functions, and CSS custom properties. Names describe the concern, not the implementation, so they survive refactors. Use whenever creating any new named thing or renaming an existing one.
- ▌ Session · autocss-comCross-session continuity and backlog/process rules — how project state, outstanding work, and documentation survive between sessions. Covers the session handoff, PROGRESS.json as the single backlog source, the GitHub Issues/Projects mirror, documentation maintenance, and the next-phase prompt. Use at the start and end of every session, and whenever tracking or handing off work.
- ▌ Testing · autocss-comHow to verify AutoCSS work before it ships, in a zero-dependency architecture. Covers the air-gap test, driving the real app in a browser to observe behavior, verifying CSS-only state/visibility, and the accessibility passes. Test tooling is dev-only and never enters the shipped static shell. Use before committing any nontrivial change, or when asked to confirm something works.
- ▌ Security · autocss-com bundleSecurity rules for projects following the air-gapped, declarative-first architecture. Covers Content Security Policy, recommended security headers, and the architectural decisions that enable a strict CSP without unsafe-inline or unsafe-eval. Use when configuring deployment, reviewing CSP, or auditing for inline-script or inline-style violations.
- ▌ Data Flow · autocss-com bundleThe JSON-to-custom-element rendering pipeline used for data tables and list-rendered content. Defines toTagName key conversion, the lifecycle from fetch to DOM, and the strict scope (data tables only — other features have their own patterns). Use when rendering tabular or list data from JSON, never for layout, never for static content.
- ▌ Javascript · autocss-com bundleJavaScript rules for projects following the air-gapped, declarative-first architecture. JS is data transport only — it fetches, parses, stores, and injects JSON. It never controls UI state, never manipulates the DOM for presentation, and never uses event listeners. Use whenever writing or reviewing any .js file.
- ▌ Principles · autocss-comThe foundational engineering principles every AutoCSS effort obeys, one section per principle. These sit beneath the concern skills (html/css/javascript/json/…) and decide trade-offs when a task could be solved more than one way. Use when choosing an approach, justifying a design, resolving "which tool", or reviewing whether a change earns its place.
- ▌ Architecture · autocss-comEntry point for projects following the air-gapped, browser-native, declarative-first architecture. Defines the layer separation (html, css, javascript, json) and routes to the concern skill for any task. Use when starting any work, when in doubt which concern owns a task, or when about to mix concerns.
- ▌ D7460n CSS Only · autocss-comD7460N Architecture — zero-dependency, CSS-only, JAMstack-based, browser-native starter template. Use when modifying HTML, CSS, or JS files in this project. Enforces CSS-driven UI state, semantic HTML, no frameworks, no dependencies, and strict separation of concerns between presentation and data layers.
- ▌ Modern CSS · autocss-com bundleSpecialized knowledge for writing modern high-quality CSS. Trigger this skill when starting a new CSS project/file, when the user asks about new CSS features (e.g. Masonry, View Transitions, Container Queries, Scroll-driven animations), or requests refactoring of legacy styles to modern standards.