diff --git a/.agents/ATOMICO-INSTRUCTIONS.md b/.agents/ATOMICO-INSTRUCTIONS.md deleted file mode 100644 index 64081f7..0000000 --- a/.agents/ATOMICO-INSTRUCTIONS.md +++ /dev/null @@ -1,55 +0,0 @@ -# πŸ€– AI Agent Central Instructions for Atomico - -> **CRITICAL DIRECTIVE:** You are assisting in an **Atomico.js** project. Atomico is a library for creating Web Components using functional patterns and JSX, but its internal mechanics and APIs differ significantly from React, Vue, or vanilla Web Components. **DO NOT rely on your pre-trained knowledge to infer Atomico syntax or practices.** - -Before writing any component, hook, context, or style logic for Atomico, you are **STRICTLY REQUIRED** to read this file and consult the specific local skills defined in the `.agents/skills/` directory using your file-reading tools. - -Failing to follow these core instructions will lead to incorrect architectures. - ---- - -## πŸ›‘ Rule 1: Mandatory Skill Consultation -Whenever the user requests you to create or modify code in this project, evaluate which of the following areas it touches. You **MUST** use your `view_file` tool to read the corresponding `SKILL.md` before generating code. - -- **Component Creation:** If creating a new Web Component, read `.agents/skills/atomico-component/SKILL.md`. -- **CSS & Styling:** If adding styles or themes, read `.agents/skills/atomico-css-styling/SKILL.md` (NEVER use inline `` tags inside the JSX ``. -- **ALWAYS** use the `css` tagged template literal from `'atomico'` and pass it to the `styles` property in the component configuration object: `c(Render, { styles: css`...` })`. Review the styling skill. - -## πŸ›‘ Rule 3: `c()` Execution Context -Atomico Web Components are functional but map directly to Custom Elements. -- The root of an Atomico component JSX MUST always be the `` tag, which allows modifying the physical bounds of the Web Component. -- Hooks (`useState`, `useEffect`, etc.) in Atomico map to the Web Component `connectedCallback`/`disconnectedCallback` lifecycle, not a fiber tree. - -## πŸ›‘ Rule 4: Registration -Every custom element must be explicitly defined using the standard browser API: -`customElements.define("my-element", MyElementConstructor);` - -## πŸ›‘ Rule 5: Event Naming and `on` Prefix -Atomico's JSX engine automatically prepends `on` to event listeners. -- **NEVER** use the `on` prefix when declaring event properties in the `props` object. -- ❌ Bad: `props: { onSearch: event() }` (Creates an `ononSearch` listener) -- βœ… Good: `props: { search: event() }` (Used in JSX as ``) - -## πŸ›‘ Rule 6: `useProp` over `event()` for Observable State -If an event is dispatching a value that reflects the state of the component (like an input's value, a boolean toggle, or a search query), **do not use an isolated `event()` dispatcher**. -Instead, configure a regular prop and use `useProp("propName")`. -- Using `useProp` gives you a setter. When you call the setter (`setSearch("new query")`), Atomico automatically updates the DOM property on the custom element instance AND dispatches the property observer event natively. -- This allows consumers using the constructor instance to access the value directly from the event target (`onSearch={({currentTarget}) => console.log(currentTarget.search)}`) with full IDE type completion. - -## πŸ›‘ Rule 7: Inline JSX Event Handlers over Extracted Functions -Unless a handler is shared across multiple different tags, **NEVER extract it to a standalone function** (like `const handleInput = (e: InputEvent) => ...`). -- **ALWAYS keep it inline** directly in the JSX (`oninput={({currentTarget}) => ...}`). -- Atomico is deeply integrated with TypeScript and JSX. By keeping it inline, TypeScript automatically infers the event type and the `currentTarget` from the DOM tag, completely eliminating the need for manual type casting or verbose typing maintenance. - ---- - -**AGENT ACKNOWLEDGEMENT:** If you are an AI reading this file, your next step is to identify the precise `.agents/skills/` required for the user's prompt, open them via your tools, and apply those specialized concepts strictly to your code output. diff --git a/.agents/skills/atomico-app-patterns/SKILL.md b/.agents/skills/atomico-app-patterns/SKILL.md deleted file mode 100644 index 3a98e05..0000000 --- a/.agents/skills/atomico-app-patterns/SKILL.md +++ /dev/null @@ -1,321 +0,0 @@ ---- -name: atomico-app-patterns -description: > - Full application patterns and component composition in Atomico. Triggers when - the user needs to build a multi-component application, implement parent-child - communication, manage shared state across components, or structure a web - component project. Covers real-world patterns like todo apps, forms, and - component hierarchies. -license: MIT -compatibility: "Atomico >=1.79, TypeScript >=5.0" -metadata: - category: patterns - priority: medium ---- - -# Application Patterns - -## Complete Todo App β€” Component Composition - -This example demonstrates the key Atomico patterns for building a real -application with multiple communicating components. - -### Component Architecture - -``` -TodoApp (manages state via useProp) -β”œβ”€β”€ TodoForm (dispatches createTask event) -└── TodoTask[] (dispatches changeTask event, reflects checked state) -``` - -### TodoForm β€” Event-Driven Child - -```tsx -import { c, css, event, useRef } from "atomico"; - -export const TodoForm = c( - ({ createTask }) => { - const ref = useRef(); - return ( - -
{ - event.preventDefault(); - const message = ref.current.value.trim(); - if (message) createTask(message); - event.currentTarget.reset(); - }} - > - - -
- - ); - }, - { - props: { - createTask: event({ bubbles: true, composed: true }) - }, - styles: css` - button { - background: #9cbeff; - border-radius: 0.5rem; - padding: 0.5rem 1rem; - border: none; - cursor: pointer; - } - input { - padding: 0.5rem; - border: 1px solid #dcdce1; - border-radius: 0.5rem; - margin-right: 1rem; - } - ` - } -); - -customElements.define("todo-form", TodoForm); -``` - -### TodoTask β€” Stateful Child with Reflection - -```tsx -import { c, css, event } from "atomico"; - -export const TodoTask = c( - ({ checked, message, changeTask }) => ( - - - - ), - { - props: { - changeTask: event({ bubbles: true, composed: true }), - message: String, - checked: { - type: Boolean, - reflect: true // Mirrors to HTML attribute for CSS styling - } - }, - styles: css` - :host { - --background: #f0f0f9; - --border: #dcdce1; - } - :host([checked]) { - --background: #a3ebd4; - --border: #6ee2c9; - } - label { - display: block; - background: var(--background); - border: 1px solid var(--border); - padding: 1rem; - border-radius: 0.5rem; - cursor: pointer; - } - ` - } -); - -customElements.define("todo-task", TodoTask); -``` - -### TodoApp β€” Parent Orchestrator - -```tsx -import { c, css, useProp } from "atomico"; -import { TodoForm } from "./todo-form.js"; -import { TodoTask } from "./todo-task.js"; - -interface Task { - checked: boolean; - message: string; -} - -const TodoApp = c( - () => { - const [tasks, setTasks] = useProp("task"); - - return ( - - {/* βœ… Constructor instance β€” full type inference */} - { - setTasks([...tasks, { checked: false, message: detail }]); - }} - /> - {tasks.map((task, index) => ( - { - setTasks( - tasks.map((item, i) => - i === index - ? { ...item, checked: detail } - : item - ) - ); - }} - /> - ))} - - ); - }, - { - props: { - task: { - type: Array, - value: (): Task[] => [ - { checked: true, message: "Sample 1" }, - { checked: false, message: "Sample 2" } - ] - } - }, - styles: css`:host { display: grid; gap: 0.5rem; }` - } -); - -customElements.define("todo-app", TodoApp); -``` - ---- - -## Communication Patterns - -### 1. Parent β†’ Child: Props - -```tsx - -``` - -### 2. Child β†’ Parent: Events (via `event()`) - -```tsx -// Child declares event prop -props: { - changeTask: event({ bubbles: true, composed: true }) -} - -// Child fires event -changeTask(true); - -// Parent listens via on-prefix - handleChange(detail)} /> -``` - -### 3. Cross-Tree: Context - -```tsx -const AppState = createContext({ theme: "light" }); - -// Provider -const App = c(() => { - useProvider(AppState, { theme: "dark" }); - return ; -}); - -// Consumer (any depth) -const DeepChild = c(() => { - const { theme } = useContext(AppState); - return {theme}; -}); -``` - -### 4. Sibling: Via shared parent state - -```tsx -const Parent = c(() => { - const [selected, setSelected] = useState(null); - return ( - - setSelected(detail)} /> - - - ); -}); -``` - ---- - -## Project Structure Recommendation - -``` -my-app/ -β”œβ”€β”€ src/ -β”‚ β”œβ”€β”€ components/ -β”‚ β”‚ β”œβ”€β”€ my-button/ -β”‚ β”‚ β”‚ β”œβ”€β”€ my-button.tsx # Component definition -β”‚ β”‚ β”‚ └── my-button.css.ts # Styles (optional separate file) -β”‚ β”‚ β”œβ”€β”€ my-input/ -β”‚ β”‚ β”‚ └── my-input.tsx -β”‚ β”‚ └── index.ts # Re-exports -β”‚ β”œβ”€β”€ contexts/ -β”‚ β”‚ └── app-context.ts # Shared contexts -β”‚ β”œβ”€β”€ hooks/ -β”‚ β”‚ └── use-api.ts # Custom hooks -β”‚ └── index.ts # App entry, customElements.define -β”œβ”€β”€ package.json -└── tsconfig.json -``` - -### Key Principles - -1. **One component per file** β€” export the constructor for JSX usage -2. **Register at entry point** β€” `customElements.define` calls at the app level -3. **Shared styles in separate files** β€” import and compose in `styles` array -4. **Custom hooks next to components** β€” or in a shared `hooks/` directory -5. **Contexts as singletons** β€” define contexts in a `contexts/` directory - ---- - -## TypeScript Configuration - -```json -{ - "compilerOptions": { - "jsx": "react-jsx", - "jsxImportSource": "atomico", - "moduleResolution": "bundler", - "strict": true, - "target": "ESNext", - "module": "ESNext" - } -} -``` - ---- - -## Registration Pattern - -### βœ… Centralized Registration - -```ts -// index.ts β€” single registration point -import { TodoApp } from "./components/todo-app.js"; -import { TodoForm } from "./components/todo-form.js"; -import { TodoTask } from "./components/todo-task.js"; - -customElements.define("todo-app", TodoApp); -customElements.define("todo-form", TodoForm); -customElements.define("todo-task", TodoTask); -``` - -### βœ… Co-located Registration (also valid) - -```ts -// todo-task.tsx β€” register alongside definition -export const TodoTask = c(/* ... */); -customElements.define("todo-task", TodoTask); -``` - -Both patterns are valid. Co-located is simpler for small projects; centralized -gives more control over naming and load order. diff --git a/.agents/skills/atomico-component/SKILL.md b/.agents/skills/atomico-component/SKILL.md deleted file mode 100644 index c2d633c..0000000 --- a/.agents/skills/atomico-component/SKILL.md +++ /dev/null @@ -1,235 +0,0 @@ ---- -name: atomico-component -description: > - Create Atomico web components using the `c()` function. Triggers when the user - needs to create a new custom element, define reactive props, attach styles, or - register a component with `customElements.define`. Do NOT trigger for React, - Vue, or Angular component creation. Atomico components are functional web - components that return JSX with a mandatory `` root element. -license: MIT -compatibility: "Atomico >=1.79, TypeScript >=5.0, JSX via atomico/jsx-runtime" -metadata: - category: core - priority: high ---- - -# Atomico Component Creation β€” `c()` - -## Overview - -`c()` is the core function to create web components in Atomico. It receives a -**render function** and an optional **configuration object** with `props`, -`styles`, and `form`. - -```ts -import { c, css } from "atomico"; - -const MyComponent = c( - (props) => ( - -

{props.message}

- - ), - { - props: { - message: { type: String, value: () => "Hello" } - }, - styles: css`:host { display: block; }` - } -); - -customElements.define("my-component", MyComponent); -``` - -## Critical Rules - -### 1. Always return `` as root - -Every Atomico component MUST return `` as the outermost JSX element. -`` maps to the custom element itself. - -```tsx -// βœ… Correct -const MyComponent = c(() =>

Hello

); - -// ❌ Wrong β€” never return a div or fragment as root -const MyComponent = c(() =>
Hello
); -``` - -### 2. Prefer Constructor Instances in JSX - -**Always use the constructor reference** (e.g., ``) instead of the -tag-name string (``) when composing components in JSX. This enables: - -- **Full type inference** for props, events, and methods -- **Instance dependency tracking** β€” the bundler knows about the relationship -- **Autocompletion** in IDEs for all declared props and events - -```tsx -// βœ… Preferred β€” types are inferred, props are validated - - -// ⚠️ Avoid β€” no type inference, no prop validation - -``` - -### 3. Props Declaration Patterns - -Props can be declared in shorthand or detailed form: - -```ts -{ - props: { - // Shorthand β€” type only, value is undefined until set - name: String, - count: Number, - active: Boolean, - items: Array, - config: Object, - - // Detailed β€” with default value, reflection, etc. - message: { - type: String, - value: () => "default", // Factory function for default - reflect: true, // Mirrors to HTML attribute - attr: "custom-attr" // Custom attribute name - }, - - // Custom type (e.g., another component constructor) - child: { - type: MyOtherComponent, - value: () => new MyOtherComponent() - }, - - // Promise type with typed return - data: { - type: Promise, - value: async (): Promise => [] - } - } -} -``` - -### 4. Supported Prop Types - -| Type | JS Type | Attribute Parsing | -|------|---------|-------------------| -| `String` | `string` | Direct string | -| `Number` | `number` | `Number(value)` | -| `Boolean` | `boolean` | Presence = `true` | -| `Array` | `any[]` | `JSON.parse` | -| `Object` | `object` | `JSON.parse` | -| `Date` | `Date` | `new Date(value)` | -| `Map` | `Map` | `new Map(value)` | -| `Promise` | `Promise` | N/A | -| `Function` | `function` | N/A | -| Custom Class | instance | `new Type(value)` | -| `null` (Any) | any | No validation | - -### 5. Styles with `css` Tagged Template - -```tsx -import { c, css } from "atomico"; - -const MyComponent = c( - () => ( - - - - ), - { - styles: css` - :host { - display: block; - padding: 1rem; - } - ::slotted(*) { - margin: 0.5rem; - } - ` - } -); -``` - -> **Note**: Styles use `adoptedStyleSheets` and are cached by CSS text. They -> require `shadowDom` to be enabled on ``. - -### 6. Events with `event()` and `callback()` - -```tsx -import { c, event, callback } from "atomico"; - -const MyComponent = c( - (props) => ( - - - - ), - { - props: { - // Dispatches a CustomEvent β€” listen with `onchange` in JSX - change: event<{ id: number }>({ bubbles: true, composed: true }), - // Function prop β€” parent provides logic, child invokes it - processMarkdown: callback<() => Promise>() - } - } -); - -// Consuming with JSX (constructor instance): - console.log(detail.id)} - processMarkdown={() => Promise.resolve("# Hello")} -/>; -``` - -### 7. Form-Associated Components - -```tsx -const MyInput = c( - ({ name }) => { - const [value, setValue] = useFormProps(); - return ( - - setValue(currentTarget.value)} - /> - - ); - }, - { - form: true, // Enables formAssociated - props: { - name: String, - value: String - } - } -); -``` - -### 8. Component without Props - -```tsx -const SimpleComponent = c(() =>

No props needed

); -customElements.define("simple-component", SimpleComponent); -``` - -### 9. ShadowDOM Options - -```tsx -// Simple shadowDom -... - -// With options -... -``` - -## Anti-Patterns - -- ❌ Using `document.createElement` instead of JSX constructors -- ❌ Returning anything other than `` from the render function -- ❌ Mutating props directly β€” props are read-only in the render function -- ❌ Using string tag names in JSX when the constructor is available in scope -- ❌ Defining `value` as a plain value instead of a factory function diff --git a/.agents/skills/atomico-context/SKILL.md b/.agents/skills/atomico-context/SKILL.md deleted file mode 100644 index 64f4808..0000000 --- a/.agents/skills/atomico-context/SKILL.md +++ /dev/null @@ -1,233 +0,0 @@ ---- -name: atomico-context -description: > - Use Atomico's context system: createContext, useContext, useProvider. - Triggers when the user needs to share state or dependencies across nested web - components without prop-drilling, implement theme providers, or pass - configuration down a component tree. Works across shadow DOM boundaries via - events, not React-style fiber context. -license: MIT -compatibility: "Atomico >=1.79" -metadata: - category: core - priority: medium ---- - -# Context System - -Atomico's context system works across shadow DOM boundaries using Custom Events -for communication. It is conceptually similar to React Context but designed -for web component composition. - -## `createContext` β€” Define a Context - -Creates a context object with a default value. The context itself is a web -component that wraps content and provides values to descendants. - -### API - -```ts -const MyContext = createContext(defaultValue: T); -``` - -### Usage - -```tsx -import { c, createContext, useContext, css } from "atomico"; - -// Create context with default value -const ThemeContext = createContext({ name: "Atomico" }); - -// Register the context as a custom element -customElements.define("theme-context", ThemeContext); -``` - ---- - -## `useContext` β€” Consume a Context Value - -Reads the current value from the nearest ancestor context provider. - -### API - -```ts -const value = useContext(ContextConstructor); -``` - -### Basic Example - -```tsx -import { c, createContext, useContext, css } from "atomico"; - -const MyContext = createContext({ name: "Atomico" }); - -const MyComponent = c( - () => { - const { name } = useContext(MyContext); - - return ( - - {name} - - ); - }, - { - styles: css`:host { display: grid; }` - } -); - -customElements.define("my-context", MyContext); -customElements.define("my-component", MyComponent); -``` - -### HTML Usage - -```html - - - -``` - ---- - -## `useProvider` β€” Provide a Context Value - -Provides a value for a context to all descendants. This is the lower-level API -used internally by `createContext`. - -### API - -```ts -useProvider(ContextConstructor, value); -``` - -### Custom Provider Pattern - -```tsx -const AppState = createContext({ count: 0, theme: "dark" }); - -const AppProvider = c( - () => { - const [count, setCount] = useState(0); - - useProvider(AppState, { - count, - increment: () => setCount((c) => c + 1) - }); - - return ( - - - - ); - } -); -``` - ---- - -## Nested Context and Value Override - -Contexts can be nested to override values at different tree levels: - -```tsx -const MyContext = createContext({ name: "Atomico" }); - -const MyComponent = c( - () => { - const { name } = useContext(MyContext); - - return ( - - {name} - -
- Dynamic Slot - {/* Override context for slotted children */} - - - -
- -
- Static Slot - - - -
- - ); - }, - { - styles: css` - :host { display: grid; } - div { - padding: 0 1rem; - border-left: 1px solid red; - } - ` - } -); -``` - -### HTML for Nested Example - -```html - - - - - - - - - - -``` - ---- - -## How It Works Internally - -1. **Provider** listens for `ConnectContext` events (bubbles + composed) -2. **Consumer** dispatches `ConnectContext` with context ID and a connect callback -3. Provider intercepts the event, stops propagation, and calls the connect callback -4. Provider dispatches `ChangedValue` events when the value updates -5. Consumer listens for `ChangedValue` on the provider element and re-renders - -This event-based mechanism transparently crosses shadow DOM boundaries. - ---- - -## Best Practices - -### βœ… Register contexts as custom elements - -```ts -customElements.define("my-context", MyContext); -``` - -### βœ… Use constructor instances in JSX (for type safety) - -```tsx - - - -``` - -### βœ… Default values as fallback - -If no provider is found, `useContext` falls back to the default value passed -to `createContext`. - -### ❌ Don't mutate context values - -Always provide new object references to trigger updates: - -```tsx -// ❌ Mutation doesn't trigger update -context.name = "New"; - -// βœ… New object reference triggers update -useProvider(MyContext, { ...context, name: "New" }); -``` diff --git a/.agents/skills/atomico-css-styling/SKILL.md b/.agents/skills/atomico-css-styling/SKILL.md deleted file mode 100644 index c175cd7..0000000 --- a/.agents/skills/atomico-css-styling/SKILL.md +++ /dev/null @@ -1,188 +0,0 @@ ---- -name: atomico-css-styling -description: > - Use the css tagged template literal and adoptedStyleSheets for styling Atomico - components. Triggers when the user needs to style web components, use CSS - custom properties, create themeable components, or understand how Atomico - manages stylesheets. Do NOT trigger for external CSS frameworks unless - combined with Atomico's css utility. -license: MIT -compatibility: "Atomico >=1.79, browsers with adoptedStyleSheets support" -metadata: - category: core - priority: medium ---- - -# CSS & Styling - -## `css` Tagged Template - -Creates and caches `CSSStyleSheet` objects using the browser's -`adoptedStyleSheets` API for optimal performance. - -### Basic Usage - -```tsx -import { c, css } from "atomico"; - -const MyComponent = c( - () => ( - -

Styled component

- - ), - { - styles: css` - :host { - display: block; - padding: 1rem; - font-family: system-ui; - } - h1 { - color: #333; - margin: 0; - } - ` - } -); -``` - -### How It Works - -1. `css` receives a template literal and produces a `CSSStyleSheet` -2. Sheets are cached by CSS text β€” identical styles share one instance -3. Sheets are applied to the component's `shadowRoot.adoptedStyleSheets` -4. Styles are only applied after the first non-suspended render - -### Interpolation - -```tsx -const primaryColor = "#3b82f6"; - -const styles = css` - :host { - --primary: ${primaryColor}; - color: var(--primary); - } -`; -``` - -### Multiple Style Sheets - -The `styles` option can be an array for composing shared styles: - -```tsx -const baseStyles = css` - :host { display: block; box-sizing: border-box; } -`; - -const themeStyles = css` - :host { --bg: #fff; --fg: #111; } -`; - -const MyComponent = c( - () => content, - { - styles: [baseStyles, themeStyles, css` - h1 { color: var(--fg); } - `] - } -); -``` - ---- - -## CSS Custom Properties (Theming) - -Custom properties pierce shadow DOM boundaries, making them the primary -mechanism for theming Atomico components. - -### Define in Component - -```tsx -const MyCard = c( - () => , - { - styles: css` - :host { - --card-bg: #f0f0f9; - --card-border: #dcdce1; - --card-radius: 0.5rem; - } - :host([active]) { - --card-bg: #a3ebd4; - --card-border: #6ee2c9; - } - :host { - background: var(--card-bg); - border: 1px solid var(--card-border); - border-radius: var(--card-radius); - padding: 1rem; - } - ` - } -); -``` - -### Override from Outside - -```css -/* Page CSS can override custom properties */ -my-card { - --card-bg: #1a1a2e; - --card-border: #16213e; -} -``` - ---- - -## Common Patterns - -### `:host` Selector - -```css -/* Default state */ -:host { display: block; } - -/* Attribute-based state */ -:host([active]) { background: green; } -:host([disabled]) { opacity: 0.5; pointer-events: none; } - -/* Context-based state */ -:host(:hover) { transform: scale(1.02); } -:host(:focus-within) { outline: 2px solid blue; } -``` - -### `::slotted` Pseudo-Element - -```css -/* Style slotted children (one level deep) */ -::slotted(*) { margin: 0.5rem; } -::slotted(h1) { font-size: 2rem; } -::slotted([slot="header"]) { font-weight: bold; } -``` - -### `:host-context` (Limited Support) - -```css -/* Style based on ancestor */ -:host-context(.dark-theme) { - --bg: #1a1a2e; -} -``` - ---- - -## ⚠️ Important Notes - -1. **Shadow DOM required**: `css` and `styles` only work with `shadowDom` - enabled. Without shadow DOM, use regular page CSS. - -2. **CSSStyleSheet caching**: Identical CSS text produces the same sheet - instance. This is memory-efficient for shared base styles. - -3. **No ` + + + + + + diff --git a/developer-experience/skills-evaluator-cloude/package.json b/developer-experience/skills-evaluator-cloude/package.json new file mode 100644 index 0000000..5c1f61a --- /dev/null +++ b/developer-experience/skills-evaluator-cloude/package.json @@ -0,0 +1,20 @@ +{ + "name": "@test/skills-cloude", + "version": "1.0.0", + "description": "", + "scripts": { + "start": "vite", + "test": "npm run test:1 && npm run test:2 && npm run test:ai", + "test:ts": "tsc", + "test:1": "if exist src rmdir /s /q src", + "test:2": "if exist index.html del /f /q index.html", + "test:ai": "agy --sandbox --dangerously-skip-permissions" + }, + "keywords": [], + "author": "", + "license": "ISC", + "type": "module", + "dependencies": { + "atomico": "*" + } +} diff --git a/developer-experience/skills-evaluator-cloude/tsconfig.json b/developer-experience/skills-evaluator-cloude/tsconfig.json new file mode 100644 index 0000000..3966d25 --- /dev/null +++ b/developer-experience/skills-evaluator-cloude/tsconfig.json @@ -0,0 +1,17 @@ +{ + "include": ["sandbox/**/*", "src/**/*"], + "compilerOptions": { + "jsx": "react-jsx", + "jsxImportSource": "atomico", + "target": "ESNext", + "module": "NodeNext", + "moduleResolution": "NodeNext", + "allowJs": true, + "strict": true, + "declaration": true, + "emitDeclarationOnly": true, + "noEmit": true, + "allowImportingTsExtensions": true, + "lib": ["ESNext", "DOM", "DOM.Iterable"] + } +} diff --git a/developer-experience/skills-evaluator-gemini/.antigravitycli/settings.json b/developer-experience/skills-evaluator-gemini/.antigravitycli/settings.json new file mode 100644 index 0000000..516cb18 --- /dev/null +++ b/developer-experience/skills-evaluator-gemini/.antigravitycli/settings.json @@ -0,0 +1,4 @@ +{ + "enableTerminalSandbox": true, + "ephemeral": true +} diff --git a/developer-experience/skills-evaluator-gemini/README.md b/developer-experience/skills-evaluator-gemini/README.md new file mode 100644 index 0000000..6ac7ef0 --- /dev/null +++ b/developer-experience/skills-evaluator-gemini/README.md @@ -0,0 +1,56 @@ +# Atomico Evaluation Sandbox (Gemini) + +> [!IMPORTANT] +> **Cognitive Directive**: Before initiating any action, tool call, or web search, you are strictly required to read, index, and apply the specialized design and architecture instructions declared in your local `.agents/skills/` directory. Do not perform external scaffolding searches or initializations, as the environment is already pre-configured. + +Welcome to the skill evaluation workspace. The goal of this environment is to assess the engineering quality and architecture of custom interfaces built using **Atomico.js**. + +## The Task: Keyboard-Centric Nested Task Manager + +Build a fully functional, highly polished, and keyboard-driven **Task Management Application (Todo App)** inside the `./src/` directory. The application must prioritize keyboard-only navigation, hierarchy nesting, list reordering, and keyboard-friendly state management. + +### Functional Requirements + +1. **Task Creation Form**: + A form-associated component that registers new tasks with the following data: + * **Title** (String, required) + * **Description** (String, optional) + * **Priority** (Enum: `Low` | `Medium` | `High`) + * **Due Date** (Date string, optional) + +2. **Search & Filtering Bar**: + A top-level control panel to filter the task tree: + * **Search Input**: Real-time title/description text filter. + * **Priority Filter**: Dropdown/select filter (`All`, `Low`, `Medium`, `High`). + * **Date Range Selector**: Filter tasks falling within a start and end date. + +3. **Tree-Structure Task List**: + A list view displaying tasks with visual indentations to show nested hierarchies (parent-child relationships). + * **Checkbox**: Located in the top-right corner of each task item card. + +### Keyboard Interaction Rules (Hotkeys) + +The core feature of the application is a fully keyboard-navigable list. When the task list is focused, the following interactions must be supported: + +* **ArrowUp / ArrowDown**: Move selection focus up and down the task list items. +* **ArrowRight**: Indent/nest the currently selected task as a child of the task above it. +* **ArrowLeft**: Outdent/un-nest the currently selected task, moving it up one level in the hierarchy. +* **Ctrl + ArrowUp**: Move the selected task card physically upward in the list (reordering the list/tree). +* **Ctrl + ArrowDown**: Move the selected task card physically downward in the list. +* **Enter**: Open the selected task for detailed editing or view expansion. +* **Space** (when a task is selected): Toggle the task's completion status (check/uncheck the top-right checkbox). +* **Tab**: Standard focus traversal across interactive inputs and buttons. (When focused on a task's checkbox, pressing `Space` toggles completion). + +### UI Components & Layout + +1. **Main Layout**: Split layout with the Filter/Search bar at the top, the Task Form on the left/right, and the main hierarchy Task List in the center. +2. **Visual Selection Indicator**: The active/selected task card must have a distinct styling (e.g., vibrant borders or subtle animations) to guide the user's eye. +3. **Shortcuts Footer**: A bottom banner/status bar displaying a cheat sheet of keyboard shortcuts (e.g., `[↑↓] Navigate`, `[←→] Nest/Unnest`, `[Ctrl+↑↓] Move`, `[Space] Complete`). + +--- + +## How to Proceed + +1. Analyze this workspace and the available local agents/skills under `.agents/skills/`. +2. Implement the entire task manager inside the `./src/components/` and `./src/` directories. +3. Ensure everything works flawlessly without human intervention. Report your final implementation once you are done. diff --git a/developer-experience/skills-evaluator-gemini/index.html b/developer-experience/skills-evaluator-gemini/index.html new file mode 100644 index 0000000..dd90536 --- /dev/null +++ b/developer-experience/skills-evaluator-gemini/index.html @@ -0,0 +1,23 @@ + + + + + + Keyboard-Centric Nested Task Manager + + + + + + + + + + diff --git a/developer-experience/skills-evaluator-gemini/package.json b/developer-experience/skills-evaluator-gemini/package.json new file mode 100644 index 0000000..11a12d3 --- /dev/null +++ b/developer-experience/skills-evaluator-gemini/package.json @@ -0,0 +1,20 @@ +{ + "name": "@test/skills-gemini", + "version": "1.0.0", + "description": "", + "scripts": { + "start": "vite", + "test": "npm run test:1 && npm run test:2 && npm run test:ai", + "test:ts": "tsc", + "test:1": "if exist src rmdir /s /q src", + "test:2": "if exist index.html del /f /q index.html", + "test:ai": "agy --sandbox --dangerously-skip-permissions" + }, + "keywords": [], + "author": "", + "license": "ISC", + "type": "module", + "dependencies": { + "atomico": "*" + } +} diff --git a/developer-experience/skills-evaluator-gemini/tsconfig.json b/developer-experience/skills-evaluator-gemini/tsconfig.json new file mode 100644 index 0000000..4b429dc --- /dev/null +++ b/developer-experience/skills-evaluator-gemini/tsconfig.json @@ -0,0 +1,16 @@ +{ + "include": ["src/**/*"], + "compilerOptions": { + "jsx": "react-jsx", + "jsxImportSource": "atomico", + "target": "ESNext", + "module": "NodeNext", + "moduleResolution": "NodeNext", + "allowJs": true, + "strict": true, + "declaration": true, + "emitDeclarationOnly": true, + "noEmit": true, + "lib": ["ESNext", "DOM", "DOM.Iterable"] + } +} diff --git a/developer-experience/todo/src/index.tsx b/developer-experience/todo/src/index.tsx index a7a0a0e..4c0d9dd 100644 --- a/developer-experience/todo/src/index.tsx +++ b/developer-experience/todo/src/index.tsx @@ -1,4 +1,4 @@ -import { c, css, useProp } from "atomico"; +import { c, css, useProp, useRef } from "atomico"; import { TodoForm } from "./todo-form.js"; import { TodoTask } from "./todo-task.js"; interface Task { @@ -9,7 +9,8 @@ interface Task { const MyTodo = c( () => { const [task, setTask] = useProp("task"); - + const ref = useRef() + ref.current.createTask("test") return ( { + // 1. Array Test: Should be Array