create-dstack 0.1.0 → 0.1.2

package/templates/.cursor/skills/brand-styling/SKILL.md

@@ -1,104 +0,0 @@
----
-name: brand-styling
-description: dstack brand identity, colors, typography, and visual styling guidelines. Use when creating UI components, pages, or any visual elements.
-disable-model-invocation: true
----
-
-# dstack branding
-
-## Overview
-
-To access dstack's official brand identity and style resources, use this skill.
-
-Keywords: branding, corporate identity, visual identity, styling, brand colors, typography, dstack brand, visual formatting, visual design, dstack
-
-## Brand Guidelines
-
-### Colors
-
-Main Colors:
-
-Teal:
-#0da5a1 - Primary brand color, calls to action, active states
-
-Background:
-#f7f7f4 - Page background (warm off-white, not pure white)
-
-Foreground:
-#26251e - Primary text and dark elements
-
-Card:
-#f2f1ed - Card surfaces and elevated containers
-
-Muted:
-#6e6c5e - Secondary text and subdued labels
-
-Border:
-#d5d4cd - Borders, dividers, and separators
-
-Accent Colors:
-
-Teal Gradient Start:
-#0da5a1 - Brand gradient start (287deg angle)
-
-Teal Gradient End:
-#00d4cf - Brand gradient end (lighter teal)
-
-Semantic Colors:
-
-Success:
-#25935f - Success states and positive indicators
-
-Warning:
-#ec9c13 - Warning states and caution indicators
-
-Error:
-#dc2828 - Error states and destructive actions
-
-Card Hierarchy (light to dark):
-
-#f2f1ed - Card (base surface)
-#f0efeb - Card-01 (slightly elevated)
-#ebeae5 - Card-02 (mid elevation)
-#e6e5e0 - Card-03 (high elevation)
-#e1e0db - Card-04 (highest elevation)
-
-### Typography
-
-Display/Brand: Manrope (with system sans-serif fallback)
-Body Text: Inter (with system sans-serif fallback)
-Data/Labels: System monospace (SF Mono, Menlo, Consolas)
-
-## Features
-
-### Smart Font Application
-
-- Applies Manrope to brand and display text (logo, hero sections, loading screens, onboarding)
-- Applies Inter at light weight to all body text
-- Applies monospace to data labels, statistics, tabular numbers, status badges, and micro-labels
-- Manrope should use tight letter-spacing for brand moments
-- Standard UI text (form labels, table cells, body copy) stays on Inter
-
-### Text Styling
-
-- Headings and brand moments: Manrope, tight tracking
-- Body text: Inter, light weight
-- Data and metrics: Monospace, small size (10-11px), uppercase, wide tracking
-- Tabular numbers always use monospace for alignment
-- Smart color selection based on surface — darker text on light surfaces, lighter text on dark
-- Preserves text hierarchy and formatting
-
-### Color Application
-
-- Warm neutral palette throughout — cream and off-white tones, never stark white
-- Brand teal used for primary actions, focus rings, and interactive highlights
-- Brand gradient reserved for premium or highlight elements — use sparingly
-- Card hierarchy provides layered depth through progressively darker warm neutrals
-- Semantic colors (success, warning, error) only for their intended status meaning
-
-### Shape and Accent Colors
-
-- Non-text elements use the brand teal or card hierarchy colors
-- Brand gradient cycles from #0da5a1 to #00d4cf at a 287deg angle
-- Maintains visual interest while staying on-brand
-- No emojis anywhere — not in UI, copy, or documentation

package/templates/.cursor/skills/create-pr/SKILL.md

@@ -1,138 +0,0 @@
----
-name: create-pr
-description: Turn current workspace changes into a published GitHub pull request by creating or reusing a branch, committing the changes, pushing the branch, and opening a PR with gh.
----
-
-## 1. Trigger this skill
-
-- Use when the user asks to run end-to-end PR publishing for current local changes.
-- Use when the user asks for branch creation + commit + push + PR in one command.
-
-## 2. Required tooling
-
-- `git` and `gh` are available and authenticated.
-- `scripts/create-pr.sh` exists at repo root.
-- Git remote `origin` is configured.
-
-## 3. Inputs you can pass
-
-- `TARGET_BRANCH`: desired branch name.
-- `COMMIT_MESSAGE`: commit message used for the commit.
-- `PR_TITLE`: PR title shown in GitHub.
-- `PR_BODY_FILE`: optional markdown file path for PR body.
-- `BASE_BRANCH`: PR base branch (default `main`).
-- `GIT_REMOTE`: git remote name (default `origin`).
-
-## 4. Process
-
-Run the workflow via script:
-
-```bash
-TARGET_BRANCH=<branch-name> \
-COMMIT_MESSAGE="<message>" \
-PR_TITLE="<PR title>" \
-BASE_BRANCH=<base branch> \
-scripts/create-pr.sh
-```
-
-Workflow order:
-
-- Create or checkout `TARGET_BRANCH`.
-- Add all local changes and create one commit with `COMMIT_MESSAGE`.
-- Push branch with upstream tracking to `GIT_REMOTE`.
-- Open a PR from `TARGET_BRANCH` to `BASE_BRANCH`.
-- Print PR URL on success.
-
-## 5. Safety and failure behavior
-
-- Abort with clear error when no changes are present.
-- Abort when required commands are unavailable.
-- If PR creation fails after push, return a message with the pushed remote branch and stop cleanly.
-
-## 6. PR description guidelines
-
-# Pull Request Guide
-
-This document describes how we write PRs for this project. The goal is for a reviewer — or anyone reading the PR months later — to understand what problem existed, what decision was made, and why, without having to read the code.
-
----
-
-## Structure
-
-Every non-trivial PR should follow this structure:
-
-### 1. Summary
-
-One short paragraph stating what this PR does and why it matters. No bullet lists here — write in prose.
-
-### 2. Before vs After
-
-For architectural or flow changes, show the old and new as ASCII diagrams or code blocks. Label the problems with the old approach explicitly. The diagram should make the improvement self-evident.
-
-```
-# Example
-Before:
-  raw snapshot (~50K tokens)
-    └─ agent A → agent B → agent C (sequential)
-
-After:
-  formatted input (~1.5K tokens)
-    ├─ agent A
-    ├─ agent B  (parallel)
-    └─ agent C
-```
-
-### 3. Key Improvements
-
-Bullet list of the specific wins. Be concrete — use numbers.
-
-- "~97% token reduction" not "significant token reduction"
-- "MAE dropped from 3.5 to 2.1" not "improved accuracy"
-- "removed one sequential LLM hop" not "made it faster"
-
-### 4. Deep-dive Sections
-
-For anything non-obvious — evaluation methodology, format design, data shape changes, model selection — give it its own titled section. Reviewers who want detail can read it; others can skip.
-
-### 5. New Data Shape
-
-Whenever the output schema of a service or database record changes, show the new shape as a TypeScript snippet or JSON example.
-
-### 6. Open TODOs
-
-Explicitly list what is **not** in this PR but should be done. Bold the item name, one sentence of context. This prevents follow-up questions and captures intent before it gets lost.
-
-- **Item name** — why it matters and what needs to happen
-
-### 7. Test Plan
-
-Checkboxes with specific commands and specific things to verify. Not "test it works" but:
-
-- [ ] Run `doppler run -- npx tsx scripts/foo.ts` — verify output X
-- [ ] Process a new profile end-to-end — confirm data shape matches Y
-- [ ] Retry a partially-failed job — confirm only failed steps re-run
-
----
-
-## Tone and Style
-
-- No emojis
-- No tool attribution footers (e.g. "Generated with X")
-- Write in plain declarative sentences: "Personality runs in parallel" not "We made personality run in parallel"
-- Use exact numbers where available
-- For model or approach comparisons, use a table
-- Don't hedge: say what happened
-
-## Title Format
-
-Use [Conventional Commits](https://www.conventionalcommits.org/). Use title case for PR titles (capitalize principal words; lowercase short conjunctions like `and`, `or`, `for` unless they start the title). Preserve identifiers as they appear in code (`Cluster.AgentId`, API names, etc.).
-
-Keep titles under 72 characters. Use the description/body for details, not the title.
-
----
-
-## PR Size
-
-- Prefer one focused PR over several small ones for tightly coupled changes
-- If a PR touches both a refactor and a new feature, split them unless they are inseparable
-- Infrastructure changes (schema, DB migrations) should be their own PR

package/templates/.cursor/skills/frontend-design/SKILL.md

@@ -1,45 +0,0 @@
----
-name: frontend-design
-description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
-license: Complete terms in LICENSE.txt
----
-
-This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
-
-The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
-
-## Design Thinking
-
-Before coding, understand the context and commit to a BOLD aesthetic direction:
-
-- **Purpose**: What problem does this interface solve? Who uses it?
-- **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
-- **Constraints**: Technical requirements (framework, performance, accessibility).
-- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?
-
-**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
-
-Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
-
-- Production-grade and functional
-- Visually striking and memorable
-- Cohesive with a clear aesthetic point-of-view
-- Meticulously refined in every detail
-
-## Frontend Aesthetics Guidelines
-
-Focus on:
-
-- **Typography**: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
-- **Color & Theme**: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
-- **Motion**: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
-- **Spatial Composition**: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
-- **Backgrounds & Visual Details**: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.
-
-NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.
-
-Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.
-
-**IMPORTANT**: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.
-
-Remember: You is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.

package/templates/.cursor/skills/make-interfaces-feel-better/SKILL.md

@@ -1,122 +0,0 @@
----
-name: make-interfaces-feel-better
-description: Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, micro-interactions, enter/exit animations, or any visual detail work. Triggers on UI polish, design details, "make it feel better", "feels off", stagger animations, border radius, optical alignment, font smoothing, tabular numbers, image outlines, box shadows.
----
-
-# Details that make interfaces feel better
-
-Great interfaces rarely come from a single thing. It's usually a collection of small details that compound into a great experience. Apply these principles when building or reviewing UI code.
-
-## Quick Reference
-
-| Category                      | When to Use                                                                       |
-| ----------------------------- | --------------------------------------------------------------------------------- |
-| [Typography](typography.md)   | Text wrapping, font smoothing, tabular numbers                                    |
-| [Surfaces](surfaces.md)       | Border radius, optical alignment, shadows, image outlines, hit areas              |
-| [Animations](animations.md)   | Interruptible animations, enter/exit transitions, icon animations, scale on press |
-| [Performance](performance.md) | Transition specificity, `will-change` usage                                       |
-
-## Core Principles
-
-### 1. Concentric Border Radius
-
-Outer radius = inner radius + padding. Mismatched radii on nested elements is the most common thing that makes interfaces feel off.
-
-### 2. Optical Over Geometric Alignment
-
-When geometric centering looks off, align optically. Buttons with icons, play triangles, and asymmetric icons all need manual adjustment.
-
-### 3. Shadows Over Borders
-
-Layer multiple transparent `box-shadow` values for natural depth. Shadows adapt to any background; solid borders don't.
-
-### 4. Interruptible Animations
-
-Use CSS transitions for interactive state changes — they can be interrupted mid-animation. Reserve keyframes for staged sequences that run once.
-
-### 5. Split and Stagger Enter Animations
-
-Don't animate a single container. Break content into semantic chunks and stagger each with ~100ms delay.
-
-### 6. Subtle Exit Animations
-
-Use a small fixed `translateY` instead of full height. Exits should be softer than enters.
-
-### 7. Contextual Icon Animations
-
-Animate icons with `opacity`, `scale`, and `blur` instead of toggling visibility. Use exactly these values: scale from `0.25` to `1`, opacity from `0` to `1`, blur from `4px` to `0px`. If the project has `motion` or `framer-motion` in `package.json`, use `transition: { type: "spring", duration: 0.3, bounce: 0 }` — bounce must always be `0`. If no motion library is installed, keep both icons in the DOM (one absolute-positioned) and cross-fade with CSS transitions using `cubic-bezier(0.2, 0, 0, 1)` — this gives both enter and exit animations without any dependency.
-
-### 8. Font Smoothing
-
-Apply `-webkit-font-smoothing: antialiased` to the root layout on macOS for crisper text.
-
-### 9. Tabular Numbers
-
-Use `font-variant-numeric: tabular-nums` for any dynamically updating numbers to prevent layout shift.
-
-### 10. Text Wrapping
-
-Use `text-wrap: balance` on headings. Use `text-wrap: pretty` for body text to avoid orphans.
-
-### 11. Image Outlines
-
-Add a subtle `1px` outline with low opacity to images for consistent depth.
-
-### 12. Scale on Press
-
-A subtle `scale(0.96)` on click gives buttons tactile feedback. Always use `0.96`. Never use a value smaller than `0.95` — anything below feels exaggerated. Add a `static` prop to disable it when motion would be distracting.
-
-### 13. Skip Animation on Page Load
-
-Use `initial={false}` on `AnimatePresence` to prevent enter animations on first render. Verify it doesn't break intentional entrance animations.
-
-### 14. Never Use `transition: all`
-
-Always specify exact properties: `transition-property: scale, opacity`. Tailwind's `transition-transform` covers `transform, translate, scale, rotate`.
-
-### 15. Use `will-change` Sparingly
-
-Only for `transform`, `opacity`, `filter` — properties the GPU can composite. Never use `will-change: all`. Only add when you notice first-frame stutter.
-
-### 16. Minimum Hit Area
-
-Interactive elements need at least 40×40px hit area. Extend with a pseudo-element if the visible element is smaller. Never let hit areas of two elements overlap.
-
-## Common Mistakes
-
-| Mistake                                | Fix                                               |
-| -------------------------------------- | ------------------------------------------------- |
-| Same border radius on parent and child | Calculate `outerRadius = innerRadius + padding`   |
-| Icons look off-center                  | Adjust optically with padding or fix SVG directly |
-| Hard borders between sections          | Use layered `box-shadow` with transparency        |
-| Jarring enter/exit animations          | Split, stagger, and keep exits subtle             |
-| Numbers cause layout shift             | Apply `tabular-nums`                              |
-| Heavy text on macOS                    | Apply `antialiased` to root                       |
-| Animation plays on page load           | Add `initial={false}` to `AnimatePresence`        |
-| `transition: all` on elements          | Specify exact properties                          |
-| First-frame animation stutter          | Add `will-change: transform` (sparingly)          |
-| Tiny hit areas on small controls       | Extend with pseudo-element to 40×40px             |
-
-## Review Checklist
-
-- [ ] Nested rounded elements use concentric border radius
-- [ ] Icons are optically centered, not just geometrically
-- [ ] Shadows used instead of borders where appropriate
-- [ ] Enter animations are split and staggered
-- [ ] Exit animations are subtle
-- [ ] Dynamic numbers use tabular-nums
-- [ ] Font smoothing is applied
-- [ ] Headings use text-wrap: balance
-- [ ] Images have subtle outlines
-- [ ] Buttons use scale on press where appropriate
-- [ ] AnimatePresence uses `initial={false}` for default-state elements
-- [ ] No `transition: all` — only specific properties
-- [ ] `will-change` only on transform/opacity/filter, never `all`
-- [ ] Interactive elements have at least 40×40px hit area
-
-## Reference Files
-
-- [typography.md](typography.md) — Text wrapping, font smoothing, tabular numbers
-- [surfaces.md](surfaces.md) — Border radius, optical alignment, shadows, image outlines
-- [animations.md](animations.md) — Interruptible animations, enter/exit transitions, icon animations, scale on press
-- [performance.md](performance.md) — Transition specificity, `will-change` usage