create-dstack 0.1.1 → 0.1.2

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

@@ -1,88 +0,0 @@
-# Performance
-
-Transition specificity and GPU compositing hints.
-
-## Transition Only What Changes
-
-Never use `transition: all` or Tailwind's `transition` shorthand (which maps to `transition-property: all`). Always specify the exact properties that change.
-
-### Why
-
-- `transition: all` forces the browser to watch every property for changes
-- Causes unexpected transitions on properties you didn't intend to animate (colors, padding, shadows)
-- Prevents browser optimizations
-
-### CSS Example
-
-```css
-/* Good — only transition what changes */
-.button {
-  transition-property: scale, background-color;
-  transition-duration: 150ms;
-  transition-timing-function: ease-out;
-}
-
-/* Bad — transition everything */
-.button {
-  transition: all 150ms ease-out;
-}
-```
-
-### Tailwind
-
-```tsx
-// Good — explicit properties
-<button className="transition-[scale,background-color] duration-150 ease-out">
-
-// Bad — transition all
-<button className="transition duration-150 ease-out">
-```
-
-### Tailwind `transition-transform` Note
-
-`transition-transform` in Tailwind maps to `transition-property: transform, translate, scale, rotate` — it covers all transform-related properties, not just `transform`. Use this when you're only animating transforms. For multiple non-transform properties, use the bracket syntax: `transition-[scale,opacity,filter]`.
-
-## Use `will-change` Sparingly
-
-`will-change` hints the browser to pre-promote an element to its own GPU compositing layer. Without it, the browser promotes the element only when the animation starts — that one-time layer promotion can cause a micro-stutter on the first frame.
-
-This particularly helps when an element is changing `scale`, `rotation`, or moving around with `transform`. For other properties, it doesn't help much — the browser can't composite them on the GPU anyway.
-
-### Rules
-
-```css
-/* Good — specific property that benefits from GPU compositing */
-.animated-card {
-  will-change: transform;
-}
-
-/* Good — multiple compositor-friendly properties */
-.animated-card {
-  will-change: transform, opacity;
-}
-
-/* Bad — never use will-change: all */
-.animated-card {
-  will-change: all;
-}
-
-/* Bad — properties that can't be GPU-composited anyway */
-.animated-card {
-  will-change: background-color, padding;
-}
-```
-
-### Useful Properties
-
-| Property                         | GPU-compositable | Worth using `will-change` |
-| -------------------------------- | ---------------- | ------------------------- |
-| `transform`                      | Yes              | Yes                       |
-| `opacity`                        | Yes              | Yes                       |
-| `filter` (blur, brightness)      | Yes              | Yes                       |
-| `clip-path`                      | Yes              | Yes                       |
-| `top`, `left`, `width`, `height` | No               | No                        |
-| `background`, `border`, `color`  | No               | No                        |
-
-### When to Skip
-
-Modern browsers are already good at optimizing on their own. Only add `will-change` when you notice first-frame stutter — Safari in particular benefits from it. Don't add it preemptively to every animated element; each extra compositing layer costs memory.

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

@@ -1,245 +0,0 @@
-# Surfaces
-
-Border radius, optical alignment, shadows, and image outlines.
-
-## Concentric Border Radius
-
-When nesting rounded elements, the outer radius must equal the inner radius plus the padding between them:
-
-```
-outerRadius = innerRadius + padding
-```
-
-This rule is most useful when nested surfaces are close together. If padding is larger than `24px`, treat the layers as separate surfaces and choose each radius independently instead of forcing strict concentric math.
-
-### Example
-
-```css
-/* Good — concentric radii */
-.card {
-  border-radius: 20px; /* 12 + 8 */
-  padding: 8px;
-}
-.card-inner {
-  border-radius: 12px;
-}
-
-/* Bad — same radius on both */
-.card {
-  border-radius: 12px;
-  padding: 8px;
-}
-.card-inner {
-  border-radius: 12px;
-}
-```
-
-### Tailwind Example
-
-```tsx
-// Good — outer radius accounts for padding
-<div className="rounded-2xl p-2">       {/* 16px radius, 8px padding */}
-  <div className="rounded-lg">          {/* 8px radius = 16 - 8 ✓ */}
-    ...
-  </div>
-</div>
-
-// Bad — same radius on both
-<div className="rounded-xl p-2">
-  <div className="rounded-xl">          {/* same radius, looks off */}
-    ...
-  </div>
-</div>
-```
-
-Mismatched border radii on nested elements is one of the most common things that makes interfaces feel off. Always calculate concentrically.
-
-## Optical Alignment
-
-When geometric centering looks off, align optically instead.
-
-### Buttons with Text + Icon
-
-Use slightly less padding on the icon side to make the button feel balanced. A reliable rule of thumb is:
-`icon-side padding = text-side padding - 2px`.
-
-```css
-/* Good — less padding on icon side */
-.button-with-icon {
-  padding-left: 16px;
-  padding-right: 14px; /* icon side = text side - 2px */
-}
-
-/* Bad — equal padding looks like icon is pushed too far right */
-.button-with-icon {
-  padding: 0 16px;
-}
-```
-
-```tsx
-// Tailwind
-<button className="pl-4 pr-3.5 flex items-center gap-2">
-  <span>Continue</span>
-  <ArrowRightIcon />
-</button>
-```
-
-### Play Button Triangles
-
-Play icons are triangular and their geometric center is not their visual center. Shift slightly right:
-
-```css
-/* Good — optically centered */
-.play-button svg {
-  margin-left: 2px; /* shift right to account for triangle shape */
-}
-
-/* Bad — geometrically centered but looks off */
-.play-button svg {
-  /* no adjustment */
-}
-```
-
-### Asymmetric Icons (Stars, Arrows, Carets)
-
-Some icons have uneven visual weight. The best fix is adjusting the SVG directly so no extra margin/padding is needed in the component code.
-
-```tsx
-// Best — fix in the SVG itself
-// Adjust the viewBox or path to visually center the icon
-
-// Fallback — adjust with margin
-<span className="ml-px">
-  <StarIcon />
-</span>
-```
-
-## Shadows Instead of Borders
-
-For **buttons, cards, and containers** that use a border for depth or elevation, prefer replacing it with a subtle `box-shadow`. Shadows adapt to any background since they use transparency; solid borders don't. This also helps when using images or multiple colors as backgrounds — solid border colors don't work well on backgrounds other than the ones they were designed for.
-
-**Do not apply this to dividers** (`border-b`, `border-t`, side borders) or any border whose purpose is layout separation rather than element depth. Those should stay as borders.
-
-### Shadow as Border (Light Mode)
-
-The shadow is comprised of three layers. The first acts as a 1px border ring, the second adds subtle lift, and the third provides ambient depth:
-
-```css
-:root {
-  --shadow-border:
-    0px 0px 0px 1px rgba(0, 0, 0, 0.06), 0px 1px 2px -1px rgba(0, 0, 0, 0.06),
-    0px 2px 4px 0px rgba(0, 0, 0, 0.04);
-  --shadow-border-hover:
-    0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 1px 2px -1px rgba(0, 0, 0, 0.08),
-    0px 2px 4px 0px rgba(0, 0, 0, 0.06);
-}
-```
-
-### Shadow as Border (Dark Mode)
-
-In dark mode, simplify to a single white ring — layered depth shadows aren't visible on dark backgrounds:
-
-```css
-/* Dark mode — adapt to whatever setup the project uses
-   (prefers-color-scheme, class, data attribute, etc.) */
---shadow-border: 0 0 0 1px rgba(255, 255, 255, 0.08);
---shadow-border-hover: 0 0 0 1px rgba(255, 255, 255, 0.13);
-```
-
-### Usage with Hover Transition
-
-Apply the variable and add `transition-[box-shadow]` for a smooth hover:
-
-```css
-.card {
-  box-shadow: var(--shadow-border);
-  transition-property: box-shadow;
-  transition-duration: 150ms;
-  transition-timing-function: ease-out;
-}
-
-.card:hover {
-  box-shadow: var(--shadow-border-hover);
-}
-```
-
-### When to Use Shadows vs. Borders
-
-| Use shadows                           | Use borders                             |
-| ------------------------------------- | --------------------------------------- |
-| Cards, containers with depth          | Dividers between list items             |
-| Buttons with bordered styles          | Table cell boundaries                   |
-| Elevated elements (dropdowns, modals) | Form input outlines (for accessibility) |
-| Elements on varied backgrounds        | Hairline separators in dense UI         |
-| Hover/focus states for lift effect    |                                         |
-
-## Image Outlines
-
-Add a subtle `1px` outline with low opacity to images. This creates consistent depth, especially in design systems where other elements use borders or shadows.
-
-### Light Mode
-
-```css
-img {
-  outline: 1px solid rgba(0, 0, 0, 0.1);
-  outline-offset: -1px; /* inset so it doesn't add to layout */
-}
-```
-
-### Dark Mode
-
-```css
-img {
-  outline: 1px solid rgba(255, 255, 255, 0.1);
-  outline-offset: -1px;
-}
-```
-
-### Tailwind with Dark Mode
-
-```tsx
-<img
-  className="outline -outline-offset-1 outline-black/10 dark:outline-white/10"
-  src={src}
-  alt={alt}
-/>
-```
-
-**Why outline instead of border?** `outline` doesn't affect layout (no added width/height), and `outline-offset: -1px` keeps it inset so images stay their intended size.
-
-## Minimum Hit Area
-
-Interactive elements should have a minimum hit area of 44×44px (WCAG) or at least 40×40px. If the visible element is smaller (e.g., a 20×20 checkbox), extend the hit area with a pseudo-element.
-
-### CSS Example
-
-```css
-/* Small checkbox with expanded hit area */
-.checkbox {
-  position: relative;
-  width: 20px;
-  height: 20px;
-}
-
-.checkbox::after {
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 40px;
-  height: 40px;
-}
-```
-
-### Tailwind Example
-
-```tsx
-<button className="relative size-5 after:absolute after:top-1/2 after:left-1/2 after:size-10 after:-translate-1/2">
-  <CheckIcon />
-</button>
-```
-
-### Collision Rule
-
-If the extended hit area overlaps another interactive element, shrink the pseudo-element — but make it as large as possible without colliding. Two interactive elements should never have overlapping hit areas.

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

@@ -1,125 +0,0 @@
-# Typography
-
-Typography rendering details that make interfaces feel better.
-
-## Text Wrapping
-
-### text-wrap: balance
-
-Distributes text evenly across lines, preventing orphaned words on headings and short text blocks. **Only works on blocks of 6 lines or fewer** (Chromium) or 10 lines or fewer (Firefox) — the balancing algorithm is computationally expensive, so browsers limit it to short text.
-
-```css
-/* Good — even line lengths on short text */
-h1,
-h2,
-h3 {
-  text-wrap: balance;
-}
-```
-
-```css
-/* Bad — default wrapping leaves orphans */
-h1 {
-  /* no text-wrap rule → "Read our
-     blog" instead of balanced lines */
-}
-```
-
-```css
-/* Bad — balance on long paragraphs (silently ignored, wastes intent) */
-.article-body p {
-  text-wrap: balance;
-}
-```
-
-**Tailwind:** `text-balance`
-
-### text-wrap: pretty
-
-Optimizes the last line to avoid orphans using a slower algorithm that favors better typography over performance. Unlike `balance`, it works on longer text — use this for body copy where you want to minimize orphans without the 6-line limit.
-
-```css
-p {
-  text-wrap: pretty;
-}
-```
-
-### When to Use Which
-
-| Scenario                                | Use                     |
-| --------------------------------------- | ----------------------- |
-| Headings, titles, short text (≤6 lines) | `text-wrap: balance`    |
-| Body paragraphs, descriptions           | `text-wrap: pretty`     |
-| Code blocks, pre-formatted text         | Neither — leave default |
-
-## Font Smoothing (macOS)
-
-On macOS, text renders heavier than intended by default. Apply antialiased smoothing to the root layout so all text renders crisper and thinner.
-
-```css
-/* CSS */
-html {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-```
-
-```tsx
-// Tailwind — apply to root layout
-<html className="antialiased">
-```
-
-### Good vs. Bad
-
-```css
-/* Good — applied once at the root */
-html {
-  -webkit-font-smoothing: antialiased;
-}
-
-/* Bad — applied per-element, inconsistent */
-.heading {
-  -webkit-font-smoothing: antialiased;
-}
-.body {
-  /* no smoothing → heavier than heading */
-}
-```
-
-**Note:** This only affects macOS rendering. Other platforms ignore these properties, so it's safe to apply universally.
-
-## Tabular Numbers
-
-When numbers update dynamically (counters, prices, timers, table columns), use tabular-nums to make all digits equal width. This prevents layout shift as values change.
-
-```css
-/* CSS */
-.counter {
-  font-variant-numeric: tabular-nums;
-}
-```
-
-```tsx
-// Tailwind
-<span className="tabular-nums">{count}</span>
-```
-
-### When to Use
-
-| Use tabular-nums            | Don't use tabular-nums   |
-| --------------------------- | ------------------------ |
-| Counters and timers         | Static display numbers   |
-| Prices that update          | Decorative large numbers |
-| Table columns with numbers  | Phone numbers, zip codes |
-| Animated number transitions | Version numbers (v2.1.0) |
-| Scoreboards, dashboards     |                          |
-
-### Caveat
-
-Some fonts (like Inter) change the visual appearance of numerals with this property — specifically, the digit `1` becomes wider and centered. This is expected behavior and usually desirable for alignment, but verify it looks right in your specific font.
-
-```css
-/* With Inter font:
-   Default:  1234  → proportional, "1" is narrow
-   Tabular:  1234  → all digits equal width, "1" centered */
-```

package/templates/.cursor/skills/react-doctor/SKILL.md

@@ -1,19 +0,0 @@
----
-name: react-doctor
-description: Run after making React changes to catch issues early. Use when reviewing code, finishing a feature, or fixing bugs in a React project.
-version: 1.0.0
----
-
-# React Doctor
-
-Scans your React codebase for security, performance, correctness, and architecture issues. Outputs a 0-100 score with actionable diagnostics.
-
-## Usage
-
-```bash
-npx -y react-doctor@latest . --verbose --diff
-```
-
-## Workflow
-
-Run after making changes to catch issues early. Fix errors first, then re-run to verify the score improved.