@bookklik/senangstart-css 0.2.9 → 0.2.12

package/.agent/skills/add-utility/SKILL.md

@@ -0,0 +1,65 @@
+---
+name: Add Utility
+description: Add new CSS utilities to the framework with definitions, engine, docs, and tests
+---
+
+# Add Utility Skill
+
+This skill guides you through the process of adding a new utility to the SenangStart CSS framework.
+
+## Overview
+
+Adding a utility involves four main steps:
+1. **Definition**: Define the utility's metadata and syntax in `src/definitions/`.
+2. **Engine Implementation**: Add handling logic to the JIT engine.
+3. **Documentation**: Document the new utility in the VitePress docs.
+4. **Testing**: Add unit and synchronization tests.
+
+## 1. Define the Utility
+
+Add a new definition in the appropriate file in `src/definitions/` (e.g., `visual.js`, `layout.js`, or `space.js`).
+
+```javascript
+{
+  name: 'my-utility',
+  property: 'my-css-property',
+  category: 'visual',
+  attribute: 'visual',
+  description: '...',
+  descriptionMs: '...',
+  syntax: 'value1 | value2 | [arbitrary]',
+  values: [
+    { name: 'value1', value: 'css-value1', description: '...' }
+  ],
+  examples: [
+    { code: 'visual="my-utility:value1"', description: '...' }
+  ]
+}
+```
+
+## 2. Update the JIT Engine
+
+Modify `src/cdn/senangstart-engine.js` to handle the new utility in the appropriate generator function (`generateVisualRule`, `generateLayoutRule`, or `generateSpaceRule`).
+
+```javascript
+if (prop === 'my-utility') {
+    const scaleValue = config.theme.myScale?.[value];
+    if (scaleValue) return `my-css-property: ${scaleValue}`;
+    if (value.startsWith('[') && value.endsWith(']')) {
+        return `my-css-property: ${value.slice(1, -1)}`;
+    }
+}
+```
+
+## 3. Update Documentation
+
+Add the utility to the relevant documentation file in `docs/utilities/`.
+
+## 4. Add Tests
+
+1. **Unit Test**: Add a test in `tests/unit/compiler/generators/`.
+2. **Sync Test**: Ensure the utility is covered by synchronization tests.
+
+## Workflows
+
+Use the `/add-utility` workflow to assist with these steps.

package/.agent/workflows/add-utility.md

@@ -2,6 +2,8 @@
 description: Add new CSS utilities to the framework with definitions, engine, docs, and tests
 ---
 
+// turbo-all
+
 # Add New Utility Workflow
 
 ## Overview

package/.agent/workflows/build.md

@@ -2,6 +2,8 @@
 description: Build distribution files and publish to npm
 ---
 
+// turbo-all
+
 # Build & Release Workflow
 
 ## Build Distribution Files

package/.agent/workflows/dev.md

@@ -2,6 +2,8 @@
 description: Start development server with hot reload for docs or CLI watch mode
 ---
 
+// turbo-all
+
 # Development Workflow
 
 ## Start Documentation Dev Server

package/AGENTS.md

@@ -0,0 +1,30 @@
+# Agents
+
+This project uses a set of specialized skills and workflows to manage the development of SenangStart CSS.
+
+## Skills
+
+Skills are specialized knowledge domains and instructions for the agent to perform specific tasks.
+
+- **[Compiler Development](file:///.agent/skills/compiler-development/SKILL.md)**: Understanding and extending the CLI compiler with parser, tokenizer, and CSS generators.
+- **[JIT Engine Development](file:///.agent/skills/jit-engine/SKILL.md)**: Developing and extending the browser-based JIT CSS engine.
+- **[SenangStart CSS Architecture](file:///.agent/skills/senangstart-architecture/SKILL.md)**: Understanding the core architecture and design patterns of the SenangStart CSS framework.
+- **[Tailwind CSS Conversion](file:///.agent/skills/tailwind-conversion/SKILL.md)**: Converting Tailwind CSS to SenangStart CSS using the conversion engine.
+- **[Add Utility](file:///.agent/skills/add-utility/SKILL.md)**: Add new CSS utilities to the framework with definitions, engine, docs, and tests.
+
+## Workflows
+
+Workflows are multi-step processes for common development tasks.
+
+- **[/add-utility](file:///.agent/workflows/add-utility.md)**: Add new CSS utilities to the framework with definitions, engine, docs, and tests.
+- **[/build](file:///.agent/workflows/build.md)**: Build distribution files and publish to npm.
+- **[/dev](file:///.agent/workflows/dev.md)**: Start development server with hot reload for docs or CLI watch mode.
+- **[/docs](file:///.agent/workflows/docs.md)**: Generate, build, and manage documentation from definitions.
+- **[/test](file:///.agent/workflows/test.md)**: Run tests including unit, integration, sync, and coverage reports.
+
+## Standards
+
+- All skills must have a `SKILL.md` file in their respective directory under `.agent/skills/`.
+- All workflows must be defined as `.md` files in `.agent/workflows/`.
+- Use `// turbo` or `// turbo-all` in workflows to indicate steps that are safe to auto-run.
+- Prefer `// turbo-all` for workflows where all commands are safe (e.g., build, test, docs).