Saltar al contenido
Marketplace

bencium-code-conventions

de bencium

Bence's code style, tech stack, and workflow conventions

Resumen

SKILL.mdLeída en 5de46a3

Code Conventions

Core Technologies

  • Frontend: ReactJS, Next.js (App Router structure), TypeScript
  • Styling: TailwindCSS v3.x (never v4), Shadcn UI
  • Build Tools: Vite (when applicable)
  • Backend: Postgres compatible convex.dev or Supabase (always ask, never local postgres)
  • Deployment: Netlify or Vercel or Fly - suggest
  • Environment: Mac M2, Python3 with virtual environments, no CUDA, no Docker
  • Alternative Languages: Avoid python if you can, try using RUST

Code Style & Structure

  • Use ES modules (import/export) syntax
  • Destructure imports when possible
  • Use TypeScript for all new code
  • Use async/await instead of Promise chains
  • Prefer const/let over var; use early returns
  • Use consts instead of functions: const toggle = () =>. Define types.
  • Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError)
  • Use lowercase with dashes for directory names (e.g., components/auth-wizard)

Framework Conventions

  • Next.js: Use App Router (app directory) structure and page.tsx files
  • React: Functional and declarative patterns; avoid classes
  • State Management: Zustand, TanStack React Query
  • Validation: Zod for schema validation

Component Library & Styling

  • Component Library: Prefer shadcn components from @/components/ui
  • Styling: Tailwind utility classes
  • Layout: Grid/flex wrappers with gap for spacing
  • Icons: @phosphor-icons/react
  • Toasts: sonner for notifications
  • Always add loading states, spinners, placeholder animations

Quality Assurance & Testing

  • TDD: Write failing tests first, commit them, then iterate until suite passes
  • Never mock tests - if there's a test script, execute all until done
  • Always write SQL in chunks with test steps after each chunk
  • Typecheck after making code changes
  • Run tests before committing
  • Prefer running single tests for performance, not whole suite

Error Handling

  • Implement proper error handling and user input validation
  • Error messages should be understood by non-technical people
  • Use early returns for error conditions
  • Test APIs via curl commands first, then implement in code

Performance & Architecture

  • Minimize 'use client', useEffect, setState; favor RSC and Next.js SSR
  • Implement dynamic imports for code splitting
  • Optimize images: WebP format, size data, lazy loading
  • Favor small, simple, well-named modules

Development Workflow

Process: Explore → Plan → Code → Commit

  • Read relevant files
  • Think through a plan
  • Implement
  • Then commit
  • Never local backend, always ask (usually Supabase, Neon)
  • Minimal dependency, no docker

Environment & Deployment

  • Add .env files for API keys; warn me to save keys in Vercel/Netlify env variables
  • Write code deployable to Netlify or Vercel; prepare to build locally first
  • Document progress in progress.md; ask for implementation plan

Archivos 1 archivo

Instálala a mano

Deska ejecuta esto por ti, para cada agente que elijas. Para ejecutarlo tú en una terminal:

npx skills add bencium/bencium-marketplace --skill bencium-code-conventions

Más de bencium

  • bencium-innovative-ux-designerbenciumDevelop an independent visual language and turn the human-chosen direction into a production-ready graphic, brand, campaign, publication, web, or product system. Use when originality and differentiation matter enough to escape generic AI and Big Tech aesthetics. Guides a minimum-evidence start, ten isolated typography-led HTML design directions made only from type, color, and space, visual-first human judgement, explicit commitment, and concrete Round 2 production. Do not use for routine UI fixes, small components, or applying an existing design system.6,800 instalaciones en skills.sh0
  • bencium-impact-designerbenciumCreate 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. Based on Anthropic's Frontend Designer Skill4,900 instalaciones en skills.sh0
  • bencium-controlled-ux-designerbenciumExpert UI/UX design guidance for unique, accessible interfaces. Use for visual decisions, colors, typography, layouts. Always ask before making design decisions. Use this skill when the user asks to build web components, pages, or applications.4,300 instalaciones en skills.sh0
  • design-auditbenciumPremium UI/UX design audit and refinement skill. Conducts systematic visual audits of existing apps and produces phased, implementation-ready design plans. Use this skill whenever the user asks to audit a UI, improve an app's visual design, make an interface feel more polished or premium, review design consistency, fix visual hierarchy, or refine spacing/typography/color. Also trigger when the user says "design review", "make it look better", "UI polish", "visual refinement", "design pass", "audit the design", or references making an app feel more professional. This skill is purely visual — it does not touch functionality, logic, or features. It elevates what exists.3,900 instalaciones en skills.sh0
  • ui-typographybenciumProfessional typography rules for UI design, web applications, software interfaces, and all screen-based text. Enforces timeless typographic correctness that LLMs consistently get wrong: proper quote marks, dashes, spacing, hierarchy, and layout. ENFORCEMENT MODE: When generating ANY HTML, CSS, React, JSX, or UI code containing visible text, auto-apply every rule in this skill silently — do not ask, do not explain, just produce correct typography. AUDIT MODE: When reviewing or improving existing interfaces or legacy code, flag violations and provide fixes. Trigger on: any HTML/CSS/React artifact creation, "build a landing page", "create a component", "design a UI", "fix the typography", "make this look professional", "review this layout", web design, presentation design, dashboard creation, document generation, or any task producing visible text for humans. Even if the user doesn't mention typography, apply these rules whenever generating UI output.3,700 instalaciones en skills.sh0
Todas las skills de bencium