{"id":45744371,"url":"https://github.com/pglevy/sailwind-starter","last_synced_at":"2026-04-26T00:01:33.361Z","repository":{"id":322739180,"uuid":"1082679734","full_name":"pglevy/sailwind-starter","owner":"pglevy","description":"A template for rapid prototyping of Appian SAIL-style interfaces using React and the Sailwind component library","archived":false,"fork":false,"pushed_at":"2026-04-22T02:22:45.000Z","size":146,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-22T04:43:39.357Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://pglevy.github.io/sailwind/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pglevy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2025-10-24T15:46:03.000Z","updated_at":"2026-04-22T02:14:59.000Z","dependencies_parsed_at":"2026-02-25T16:02:48.174Z","dependency_job_id":null,"html_url":"https://github.com/pglevy/sailwind-starter","commit_stats":null,"previous_names":["pglevy/sailwind-starter"],"tags_count":3,"template":true,"template_full_name":null,"purl":"pkg:github/pglevy/sailwind-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pglevy%2Fsailwind-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pglevy%2Fsailwind-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pglevy%2Fsailwind-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pglevy%2Fsailwind-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pglevy","download_url":"https://codeload.github.com/pglevy/sailwind-starter/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pglevy%2Fsailwind-starter/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32280981,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-25T18:29:39.964Z","status":"ssl_error","status_checked_at":"2026-04-25T18:29:32.149Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-02-25T16:00:24.353Z","updated_at":"2026-04-26T00:01:33.300Z","avatar_url":"https://github.com/pglevy.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Sailwind Starter\n\nA ready-to-use starter template for rapid prototyping of Appian SAIL-style interfaces using React and the [Sailwind component library](https://www.npmjs.com/package/@pglevy/sailwind).\n\nPerfect for designers and developers who want to quickly mock up Appian interfaces and iterate with AI assistance!\n\n## ✨ Features\n\n- 🎨 **Pre-configured Sailwind Components** - All SAIL-style components ready to use\n- 🚀 **Instant Setup** - Clone and run with a single command\n- 🗺️ **Automatic Routing** - Just add files to `/src/pages/` and they're automatically routed\n- 📋 **Table of Contents** - Built-in navigation for all your prototype pages\n- 🎭 **Example Pages** - Three full example pages to learn from\n- 💅 **Tailwind CSS v4** - Pre-configured and optimized\n- 🤖 **LLM-Friendly** - Designed to work seamlessly with AI coding assistants\n\n## 🚀 Quick Start\n\n### 1. Use This Template\n\n1. **Click \"Use this template\" button** on GitHub to create a new repository\n    - *Make it private for internal work!*\n2. **Download your new repository** (or clone if using git)\n3. **Open folder in VS Code** (or preferred IDE)\n\n### 2. Install pnpm\n\nThis project uses [pnpm](https://pnpm.io/) as its package manager. If you don't have it yet, the easiest way to get started is with corepack (ships with Node.js 16.13+):\n\n```bash\ncorepack enable\n```\n\nThat's it — corepack reads the `packageManager` field in `package.json` and sets up the right version of pnpm automatically.\n\nAlternatively, install pnpm directly:\n\n```bash\n# macOS with Homebrew\nbrew install pnpm\n\n# or via npm\nnpm install -g pnpm\n```\n\n### 3. Install Dependencies\n\n```bash\npnpm install\n```\n\n### 4. Start Prototyping\n\nRun this command to start the development server:\n\n```bash\npnpm run dev\n```\n\nOpen [http://localhost:5173](http://localhost:5173) to see your prototype!\n\n\u003e [!Tip]\n\u003e Need some extra help getting set up? If you're using Kiro IDE, there's a setup power built in, or you can grab the [pnpm-setup skill](https://github.com/pglevy/agent-skills) for step-by-step guidance. See the [options below](#for-kiro-ide-users) for more details.\n\n## 🪝 Agent Hooks\n\nThis project includes Kiro agent hooks (`.kiro/hooks/`) that automate common checks. All hooks are manually triggered from the Agent Hooks panel in Kiro IDE.\n\n| Hook | What it does |\n|------|-------------|\n| **Verify Build** | Asks the agent to run `pnpm run build` and fix any errors before declaring work complete |\n| **Check Color Palette** | Runs `scripts/check-color-palette.js` to warn about Tailwind color classes using steps outside the approved set (50, 100, 200, 500, 700, 900) |\n| **Check Sailwind Updates** | Checks if a newer version of `@pglevy/sailwind` is available and offers to update |\n\nThese hooks reduce the amount of guidance needed in AGENTS.md by handling checks programmatically instead of through written instructions.\n\n## 📁 Project Structure\n\n```\nsailwind-starter/\n├── src/\n│   ├── db/              # Data layer (mock APIs, transition-ready)\n│   │   ├── types.ts     # Shared type utilities\n│   │   ├── users.ts     # Mock usernames for user-reference fields\n│   │   ├── tasks.ts     # Example entity module\n│   │   ├── applications.ts\n│   │   └── documents.ts\n│   ├── pages/           # Your prototype pages go here!\n│   │   ├── home.tsx\n│   │   ├── task-dashboard.tsx\n│   │   ├── application-status.tsx\n│   │   ├── document-review.tsx\n│   │   └── not-found.tsx\n│   ├── App.tsx          # Routing configuration\n│   ├── main.tsx\n│   └── index.css\n├── schemas/             # JSON schemas for contract validation\n├── public               # Images go here\n├── package.json\n├── README.md\n└── AGENTS.md\n```\n\n## 📊 Data Layer Convention\n\nAll prototype data lives in `src/db/` as typed async functions. Pages import from `src/db/` — never inline data directly. This makes every prototype \"transition-ready\" for connecting to a real Appian backend.\n\nEach entity gets its own file (e.g., `src/db/tasks.ts`) with:\n- A TypeScript interface defining the data shape\n- Seed data for prototyping\n- Async CRUD functions (`getTasks()`, `createTask()`, etc.)\n\nUser-reference fields (like `assignee`, `createdBy`) store Appian usernames as plain strings.\n\n### Appian App Generation\n\nThree skills in `.kiro/skills/` enable going from prototype to Appian app:\n\n1. **Extract Prototype Contract** — reads `src/db/` and produces an API contract JSON\n2. **Generate Appian App** — takes the contract and produces an importable Appian package (record types + web APIs + DDL)\n3. **Deploy to Appian** — deploys the package + DDL to an Appian environment via the Deployment REST API (inspect, import, poll for results)\n4. **Connect to Appian** — rewrites `src/db/` to use real `fetch` calls against the generated web APIs\n\nSee the steering file at `.kiro/steering/data-layer.md` for the full convention.\n\n## 🎯 Creating New Pages\n\n### Step 1: Create a New Page File\n\nAdd a new file in `src/pages/`:\n\n```typescript\n// src/pages/my-prototype.tsx\nimport { HeadingField, CardLayout, TextField, ButtonWidget } from '@pglevy/sailwind'\nimport { Link } from 'wouter'\n\nexport default function MyPrototype() {\n  return (\n    \u003cdiv className=\"space-y-6\"\u003e\n      \u003cLink href=\"/\" className=\"text-blue-600 hover:underline\"\u003e← Back to Home\u003c/Link\u003e\n\n      \u003cHeadingField text=\"My Prototype\" size=\"LARGE\" /\u003e\n\n      \u003cCardLayout\u003e\n        \u003cTextField label=\"Name\" placeholder=\"Enter your name\" /\u003e\n        \u003cButtonWidget label=\"Submit\" style=\"PRIMARY\" /\u003e\n      \u003c/CardLayout\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n### Step 2: Register the Route\n\nAdd your page to `src/App.tsx`:\n\n```typescript\n// Import your page\nimport MyPrototype from './pages/my-prototype'\n\n// Add to the pages array\nconst pages = [\n  { path: '/', title: 'Home', component: Home },\n  { path: '/my-prototype', title: 'My Prototype', component: MyPrototype },\n  // ... other pages\n]\n```\n\nThat's it! Your page is now accessible at `/my-prototype`.\n\n## 🧩 Available Components\n\nSailwind provides all the SAIL components you need:\n\n### Layout\n- `CardLayout` - Container with card styling\n- `TableOfContents` - Automatic navigation\n\n### Display\n- `HeadingField` - Various heading sizes\n- `RichTextDisplayField` - Rich text with formatting\n- `ImageField` - Images with sizing options\n- `StampField` - Status stamps\n- `MessageBanner` - Info, success, warning, error messages\n- `TagField` - Tags and labels\n- `ProgressBar` - Progress indicators\n- `MilestoneField` - Step-by-step progress\n\n### Input\n- `TextField` - Text input with labels\n- `CheckboxField` - Checkboxes\n- `RadioButtonField` - Radio buttons\n- `DropdownField` - Dropdown select\n- `MultipleDropdownField` - Multi-select dropdown\n- `SwitchField` - Toggle switch\n- `ToggleField` - Button toggle\n- `SliderField` - Numeric slider\n\n### Actions\n- `ButtonWidget` - Buttons with various styles\n- `ButtonArrayLayout` - Button groups\n- `DialogField` - Modal dialogs\n- `TabsField` - Tabbed content\n\n## 💡 Working with AI Assistants\n\nThis starter is optimized for AI-assisted development. Here are some example prompts:\n\n### Creating a New Page\n```\nCreate a new page called \"vendor-registration\" that includes:\n- A form for vendor information (company name, contact, email)\n- Address fields\n- A checkbox for terms acceptance\n- Submit and cancel buttons\n```\n\n### Modifying Existing Pages\n```\nUpdate the task-dashboard page to show tasks in a table format instead of cards,\nwith columns for task name, assignee, due date, and priority\n```\n\n### Adding New Features\n```\nAdd a search bar to the home page that filters the page list in the\ntable of contents as you type\n```\n\n## 🤖 Kiro-Specific Features\n\nThis starter includes special features for [Kiro IDE](https://kiro.dev) and [Kiro CLI](https://kiro.dev/cli) users:\n\n### For Kiro CLI Users\n\n**Pre-configured \"sailor\" Agent**\n- Custom agent optimized for Sailwind prototyping\n- Includes browser automation tools (Chrome DevTools \u0026 Playwright MCP servers)\n- Pre-loaded with project context (AGENTS.md, README.md, GIT.md)\n- Auto-approved commands for common tasks (`npm run build`, `npm run dev`, etc.)\n- Located at `.kiro/agents/sailor.json`\n\nTo use the sailor agent:\n```bash\nkiro-cli --agent sailor\n```\n\n### For Kiro IDE Users\n\n**Development Environment Setup**\n- **Skill**: [pnpm-setup](https://github.com/pglevy/agent-skills) - Guided pnpm installation and migration (grab from the agent-skills repo and add to `.kiro/skills/`)\n- **Steering file**: `.kiro/steering/SETUP.md` - Detailed setup guidance available on request\n- **Kiro Power**: `.kiro/powers/setup/POWER.md` - Automated setup assistant (install from Powers panel)\n\n**Vercel Deployment**\n- **Kiro Power**: `.kiro/powers/vercel/POWER.md` - Complete guide for deploying prototypes to Vercel\n- Covers account setup, GitHub/GitLab integration, CLI usage, and secure preview sharing\n- Includes Deployment Protection and Shareable Links for controlled access\n\n**Upgrade Tooling from Template**\n- **Kiro Power**: `.kiro/powers/upgrade/POWER.md` - Syncs your project with the latest scripts, hooks, and steering files from the template repo\n- Fetches files directly from GitHub and compares against your local project\n- Suggests AGENTS.md sections that can be trimmed now that hooks and steering handle them\n\n**Git Workflow Guidance**\n- Designer-friendly git instructions in `.kiro/steering/GIT.md`\n- Automatically included in context when working with git\n- Helps with branching, commits, and pull requests\n\n**Component Library Reference**\n- `AGENTS.md` - Comprehensive guide for AI assistants\n- Includes component usage patterns, common mistakes, and validation requirements\n- Automatically loaded by the sailor agent\n\n### For Both Kiro IDE \u0026 CLI\n\n**Steering Files** (`.kiro/steering/`)\n- `AGENTS.md` - Component library reference and best practices\n- `GIT.md` - Git workflow guidance for designers\n- `SETUP.md` - Development environment setup instructions\n\nThese files provide context to Kiro automatically, making it easier to work with the Sailwind component library and follow project conventions.\n\n## 🖼️ Adding Images\n\nPlace your images in the `/public` folder and reference them with relative paths:\n\n```\npublic/\n├── images/\n│   ├── logo.png\n│   └── photo.jpg\n└── vite.svg\n```\n\nReference in your components:\n```tsx\n\u003cimg src=\"images/logo.png\" alt=\"Logo\" /\u003e\n\u003cimg src=\"images/photo.jpg\" alt=\"Photo\" /\u003e\n```\n\n**Why `/public`?**\n- Simple and fast for prototyping\n- No imports needed - just drop images and reference them\n- Easy to swap images without touching code\n- Predictable URLs for dynamic image names\n\n## 🎨 Styling\n\nThis template uses **Tailwind CSS v4** and is already configured to scan Sailwind components for classes.\n\nAdd custom styles using Tailwind utility classes:\n```tsx\n\u003cdiv className=\"p-4 bg-blue-50 rounded-lg shadow\"\u003e\n  \u003cHeadingField text=\"Custom Styled Card\" /\u003e\n\u003c/div\u003e\n```\n\nSee the full [SAIL-to-Tailwind mapping](https://github.com/pglevy/sailwind/blob/main/TAILWIND-SAIL-MAPPING.md) in the source Sailwind repo.\n\n## 📦 What's Included\n\n- **React 19** - Latest React with TypeScript\n- **Vite** - Lightning-fast dev server\n- **Tailwind CSS v4** - Utility-first styling\n- **Wouter** - Lightweight routing\n- **Sailwind** - Complete SAIL component library\n- **Radix UI** - Accessible component primitives\n- **Lucide React** - Beautiful icons\n\n## 🔧 Available Scripts\n\n```bash\npnpm run dev           # Start development server\npnpm run build         # Build for production\npnpm run preview       # Preview production build\npnpm run lint          # Lint code\npnpm run check:colors  # Check for off-palette Tailwind color steps\n```\n\n## 📚 Documentation\n\n- **Sailwind Components**: [GitHub](https://github.com/pglevy/sailwind)\n- **Tailwind CSS**: [tailwindcss.com](https://tailwindcss.com)\n- **React**: [react.dev](https://react.dev)\n- **Vite**: [vite.dev](https://vite.dev)\n\n## 🤝 Contributing\n\nThis is a starter template - feel free to customize it for your needs!\n\nIf you have suggestions for improvements, please open an issue or PR on the [Sailwind Starter repository](https://github.com/pglevy/sailwind-starter).\n\n## 📄 License\n\nMIT License - feel free to use this for any project!\n\n## 🎉 Happy Prototyping!\n\nThis template is designed to get you from idea to interactive prototype as quickly as possible. Just describe what you want to your AI assistant and start building!\n\n---\n\n**Made with 🩸,😅, and 😭 for rapid Appian prototyping**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpglevy%2Fsailwind-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpglevy%2Fsailwind-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpglevy%2Fsailwind-starter/lists"}