• Townie
    AI
  • Blog
  • Docs
  • Pricing
  • We’re hiring!
Log inSign up
diogenesoftoronto

diogenesoftoronto

site

a site for turning model context protocols into clis
Public
Like
site
Home
Code
9
skills
1
.gitignore
.vtignore
AGENTS.md
App.tsx
CRUSH.md
deno.json
index.html
index.tsx
Branches
1
Pull requests
Remixes
1
History
Environment variables
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Sign up now
Code
/
CRUSH.md
Code
/
CRUSH.md
Search
…
CRUSH.md

CRUSH.md - Project Configuration for Agentic Coding Tools

Build/Lint/Test Commands

This is a static React TSX frontend project with no build system.

Type Checking

deno check

Linting

deno lint

Formatting

deno fmt

Running (Development)

deno task dev # if defined in deno.json # or serve locally: python -m http.server 8000

Testing

No test framework configured. For manual testing:

  • Open index.html in browser
  • Test form submission functionality
  • Verify transport field toggling
  • Test React state management

Code Style Guidelines

Language & Framework

  • Language: TypeScript with TSX (React components)
  • Runtime: Deno (Val Town environment)
  • Framework: React 18.2.0 with pinned versions
  • Styling: TailwindCSS via CDN
  • Imports: Use https://esm.sh for external dependencies

React Configuration

  • JSX Transform: /** @jsxImportSource https://esm.sh/react@18.2.0 */
  • React Version: All dependencies pinned to 18.2.0
  • State Management: React useState hooks
  • Styling: TailwindCSS classes (no CSS modules)

TypeScript Configuration

  • strict: true - All strict checks enabled
  • noImplicitAny: false - Explicit any types allowed but discouraged
  • Include Val Town types: "https://www.val.town/types/valtown.d.ts"
  • DOM and Deno libraries available

Naming Conventions

  • Files: camelCase for TSX files (App.tsx, index.tsx)
  • Components: PascalCase (App, ServerConfig)
  • Variables: camelCase
  • Functions: camelCase, descriptive names
  • Types/Interfaces: PascalCase
  • Constants: UPPER_SNAKE_CASE
  • Props: camelCase

Code Structure

  • Components: Functional components with hooks
  • State: useState for local component state
  • Events: React event handlers (e.g., onChange, onSubmit)
  • Props: TypeScript interfaces for component props
  • Styling: TailwindCSS utility classes

Best Practices

  • Use const by default, let only when reassignment needed
  • Prefer arrow functions for callbacks
  • Add TypeScript types for all data structures and props
  • Handle errors gracefully with user-friendly messages
  • Avoid any types - use proper interfaces
  • Keep components small and focused
  • Use modern ES6+ features and React patterns

Security

  • Never bake secrets into code
  • Use environment variables: Deno.env.get('VAR_NAME')
  • Validate and sanitize user inputs
  • Use HTTPS for external requests

Val Town Specifics

  • No Node.js APIs available
  • Use Val Town standard libraries when needed
  • Follow Val Town platform limitations and gotchas
  • HTML file serves as no-JS fallback

Project Structure

├── index.html          # No-JS fallback with React app container
├── index.tsx           # React app entry point
├── App.tsx             # Main React component
├── deno.json           # Deno configuration
├── AGENTS.md           # Val Town development guidelines
├── CRUSH.md            # This file
├── skills/             # Development skills documentation
│   └── val-town-development.md
└── .gitignore          # Git ignore rules
```</content>
<parameter name="file_path">CRUSH.md
FeaturesVersion controlCode intelligenceCLI
Use cases
TeamsAI agentsSlackGTM
DocsShowcaseTemplatesNewestTrendingAPI examplesNPM packages
PricingNewsletterBlogAboutCareers
We’re hiring!
Brandhi@val.townStatus
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Terms of usePrivacy policyAbuse contact
© 2025 Val Town, Inc.