engineering-vocabulary
Skill9 starsChanged 2 months agoMITView on GitHub
Name a frontend engineering concept from a loose description. Reverse-lookup for FE technical terms — user describes a pattern informally ("supaya gak fetch ulang", "render cuma yang keliatan"), skill returns the proper name + brief definition. Use when the user uses informal language for a technical concept, or when you need the correct term to pick the right implementation.
In this repository36 other files it gives its agents.
- AGENTS.mdAGENTS.md
- CLAUDE.mdCLAUDE.md
- .cursor/rules/design-system-enforcer.mdcCursor rule
- frontend-expertSkill
- accessibilitySkill
- anti-slop-codeSkill
- anti-slop-designSkill
- app-shellSkill
- architectureSkill
- componentsSkill
- content-designSkill
- data-fetchingSkill
- design-colorSkill
- design-directionSkill
- design-foundationsSkill
- design-surfacesSkill
- design-typographySkill
- design-vocabularySkill
- devtoolsSkill
- fidelitySkill
- formsSkill
- frontend-expertSkill
- marketingSkill
- monitoringSkill
- motion-inspectionSkill
- motionSkill
- performanceSkill
- polishSkill
- prototypeSkill
- quality-loopSkill
- responsiveSkill
- seoSkill
- skill-authoringSkill
- testingSkill
- tokensSkill
- webglSkill
The file
Files
SKILL.md
Engineering Vocabulary
Overview
Bridge the gap between casual engineering descriptions and precise technical terms. When a user describes a frontend pattern loosely, look it up here to pick the right implementation approach.
When to use
- User describes a pattern informally ("yang nge-cache itu", "biar gak nge-lag")
- You need the precise term to search docs or pick the right library
- Communicating architecture decisions clearly
When to skip
- User already uses the correct term
- Non-frontend (backend, DevOps, database) concepts
Lookup table
State Management
| Description (loose) | Term | Definition |
| Share data without passing through every component | Context / Provider pattern | React Context or equivalent for cross-tree state |
| Data cached so it doesn't fetch again | SWR / Stale-while-revalidate | Return cached data, revalidate in background |
| Store that any component can read | Global store (Zustand/Redux) | Centralized client state container |
| State in the URL (filters, tabs) | URL state / Search params | Shareable, bookmarkable state via URL |
| Pass data down without prop chains | State hoisting / Lifting state | Move state to nearest common ancestor |
| Optimistic update before server confirms | Optimistic UI / Optimistic mutation | Show expected result immediately, rollback on error |
| Undo/redo support | Command pattern / History stack | Stack of reversible actions |
| Form state that tracks dirty/touched | Form state management | Libraries like React Hook Form, Formik |
| Derived value computed from other state | Computed / Derived state / Selector | Value calculated from source state, memoized |
Data Fetching & Async
| Description (loose) | Term | Definition |
| Loading skeleton before data | Skeleton screen / Placeholder UI | Shimmer placeholders mimicking final layout |
| Retry on failure | Retry with backoff | Re-attempt failed requests with increasing delay |
| Cancel request when leaving page | Abort controller / Request cancellation | AbortController signal to cancel in-flight fetch |
| Load more as you scroll | Infinite scroll / Cursor pagination | Fetch next page when nearing scroll bottom |
| Fetch once, use everywhere | Query cache / React Query | Centralized async state with cache + revalidation |
| Pre-fetch data before user navigates | Prefetching / Preloading data | Anticipate next route, start fetching early |
| Debounce search input | Debounced input | Delay execution until user stops typing (~300ms) |
| Show stale data while loading new | Stale-while-revalidate (SWR) | Display cached result, refresh in background |
| Parallel requests instead of sequential | Promise.all / Parallel fetching | Fire independent requests simultaneously |
| Server sends updates without polling | WebSocket / Server-Sent Events | Real-time push from server to client |
Rendering & Performance
| Description (loose) | Term | Definition |
| Render only visible list items | Virtualization / Windowing | Render only viewport-visible items (react-virtual, etc.) |
| Component doesn't re-render unnecessarily | Memoization (React.memo/useMemo) | Skip re-render when props/deps unchanged |
| Load component only when needed | Lazy loading / Code splitting | Dynamic import() + Suspense for deferred loading |
| Render on the server first | SSR (Server-Side Rendering) | Generate HTML on server, hydrate on client |
| Static HTML at build time | SSG (Static Site Generation) | Pre-render pages at build time |
| Mix of server and client components | Islands architecture / Partial hydration | Static shell + interactive client islands |
| Avoid layout thrashing | Layout batching / Read-write separation | Batch DOM reads before writes |
| Animate without jank | Compositor-friendly animation | Use only transform/opacity for smooth 60fps |
| Heavy computation off main thread | Web Worker | Run CPU-intensive work in background thread |
| Throttle scroll/resize handlers | Throttling | Limit handler execution to N times per second |
Component Architecture
| Description (loose) | Term | Definition |
| Component that renders its children | Compound component | Parent + children share implicit state (Tabs + Tab) |
| Component that accepts a render function | Render props | Pass rendering logic as a function prop |
| Wrap component to add behavior | HOC (Higher-Order Component) | Function that returns an enhanced component |
| Reusable logic extracted from component | Custom hook | useXxx() function encapsulating stateful logic |
| Component that just displays, no logic | Presentational component / Dumb component | Pure UI, receives all data via props |
| Component that fetches and manages state | Container component / Smart component | Handles data, passes to presentational children |
| Slot where parent injects content | Children / Slots / Composition | props.children or named slots for flexible layouts |
| Component that handles its own errors | Error boundary | Catches render errors, shows fallback UI |
| Forwarding ref to inner element | forwardRef | Expose inner DOM node to parent via ref |
| Polymorphic "render as" different element | Polymorphic component / as prop | Component that can render as different HTML elements |
CSS & Styling
| Description (loose) | Term | Definition |
| Styles scoped to one component | CSS Modules / Scoped styles | Class names hashed to prevent collision |
| CSS variables for theming | Design tokens / CSS custom properties | --color-primary etc. in :root for systematic theming |
| Responsive without media queries | Container queries | Style based on parent size, not viewport |
| Apply styles based on parent state | :has() selector | Parent selector — style parent based on child state |
| Dark/light mode toggle | Color scheme / Theme switching | prefers-color-scheme + manual toggle |
| Utility classes like Tailwind | Utility-first CSS | Single-purpose classes composed in markup |
| CSS-in-JS at build time | Zero-runtime CSS-in-JS | Styles extracted at build (Vanilla Extract, Panda) |
| Smooth number transitions | tabular-nums / CSS counter animation | Fixed-width numerals for stable layout |
| Balanced heading line breaks | text-wrap: balance | Browser-native even line distribution |
Architecture & Patterns
| Description (loose) | Term | Definition |
| Folder per feature, not per type | Feature-based architecture | features/auth/, not components/ + hooks/ + utils/ |
| One source of truth for routes | Centralized routing | Route config in one place (React Router, Next.js pages) |
| Shared UI library across features | UI primitives / Design system | Reusable base components (Button, Input, Card) |
| API calls in one place | API layer / Service layer | Centralized API functions, not fetch() in components |
| Types shared between FE and BE | Shared types / Contract-first | TypeScript interfaces shared or generated from schema |
| Feature flags | Feature toggle / Remote config | Enable/disable features without deploy |
| Event-driven communication | Event bus / Pub-sub | Loosely coupled component communication |
| Guard routes based on auth | Route guard / Protected route | Redirect unauthenticated users |
| Micro frontend | Module federation / Micro-frontend | Independent deployable frontend modules |
| Monorepo with shared packages | Monorepo (Turborepo/Nx) | Multiple apps/packages in one repository |
Testing
| Description (loose) | Term | Definition |
| Test one component in isolation | Unit test / Component test | Render + assert on single component |
| Test user flows end-to-end | E2E test (Playwright/Cypress) | Simulate real user interaction in browser |
| Test visual appearance | Visual regression / Snapshot test | Compare screenshots against baseline |
| Test accessibility automatically | axe-core / a11y audit | Automated WCAG violation detection |
| Mock API responses | MSW (Mock Service Worker) | Intercept network requests with mock responses |
| Test from user perspective | Testing Library philosophy | Query by role/label, not implementation details |
Workflow
- Listen for informal engineering descriptions
- Match against the lookup table above
- Return the proper term + brief definition
- Implement using the named pattern/library
Checklist
- Loose description identified
- Correct engineering term applied
- Right library/approach chosen based on the pattern
- Implementation follows established conventions for that pattern
Depth
Cross-reference with:
- State architecture:
references/architecture.md - FE architecture:
architectureskill +references/architecture.md - Data patterns:
data-fetchingskill +references/data-fetching.md - Performance:
performanceskill +references/performance.md - Testing:
testingskill +references/testing.md
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.