'frontend' 검색 결과

Set up Pact tests that record what a frontend expects from an API and verify those expectations against the backend. Review these contract tests to catch incompatible changes and help services be tested and deployed independently.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Set up tests for frontend and backend API compatibility
• Check whether services can be deployed independently
• Replace selected slow end-to-end tests with contract tests

Review visual design choices before creating or styling web pages, components, apps, dashboards, or interactive reports. It flags repetitive colors, typography, layouts, and motion patterns to avoid, while keeping explicit user requests and other specified styles in control.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Review design choices before creating a web page
• Check repetitive card layouts in a dashboard
• Review typography and color choices in components

Coordinate specialist agents to investigate and improve application performance across databases, backend services, frontend code, and delivery infrastructure. Establish baseline measurements, address observed bottlenecks, validate changes with load tests, and set up monitoring to detect future slowdowns.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Finding bottlenecks across an entire application
• Coordinating database, backend, and frontend improvements
• Validating performance changes with load tests

Reconstruct frontend behavior from served JavaScript, build manifests, and source maps, which link built code to source. Trace loaded modules, recover route and API references, and identify the smallest asset sequence that explains observed behavior.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Reconstructing the structure of served JavaScript
• Recovering route and API references from built assets
• Tracing chunk loading and obscured loader code

Find the engineering specialist skill that matches a task, from system design and frontend development to testing, security, and AI. This index explains each area of focus and directs agents to load the relevant skill’s instructions.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Choosing a skill for system design or implementation
• Finding guidance for testing and code review
• Locating specialists for AI and data work

Develop and debug LangBot's backend and web frontend. The skill guides environment setup, API additions, authentication, database migrations, and testing, including updates to matching MCP tools so agents can use changed API features.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Set up the LangBot backend and frontend for development
• Add an API endpoint and its matching MCP tool
• Update the database schema with Alembic

Build working web pages, components, and application interfaces with a clear visual direction. The skill guides typography, color, spacing, motion, and responsive layouts that adapt to different screen sizes.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Build a web page with a distinctive visual style
• Create reusable interface components
• Adapt an application interface for mobile screens

Review an implemented frontend through a visual audit organized around six pillars. Get a Markdown report with a score from 1 to 4 for each pillar, covering a specified phase or the last completed phase.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Reviewing the visual quality of an implemented frontend
• Recording a visual review for a specific phase
• Keeping a scored UI assessment as a Markdown report

Create UI-SPEC.md, a document defining interface design decisions for a frontend phase. The skill coordinates UI research and specification checks, using a chosen phase or automatically selecting the next unplanned one.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Preparing UI specifications for a frontend phase
• Researching UI before documenting design decisions
• Checking a UI specification after drafting it

Read frontend source code to document colors, typography, spacing, components, and layout rules in DESIGN.md. Use it to understand an existing interface or prepare design guidance for Stitch without building or running the app.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Document an existing app's design system
• Review styling when the app cannot run
• Prepare an existing visual identity for Stitch

Build web pages and interface components with a clear visual direction suited to their purpose and audience. The skill guides typography, color, layout, and animation, turning design choices into working frontend code.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Building a landing page with a distinctive visual style
• Designing a dashboard with a consistent look
• Refining the typography, spacing, and colors of an existing web UI

Test and debug rendered web apps by reproducing interaction bugs, checking layouts and console errors, making focused fixes, and validating again. Results include screenshots, observed state changes, and a QA report explaining coverage and remaining gaps.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Reproducing and fixing broken UI interactions
• Checking desktop and mobile layouts
• Investigating blank pages and console errors

Build working web pages, components, and app interfaces around a clear visual concept. Coordinate typography, color, spacing, motion, and interaction details, adapting layouts to different screen sizes while avoiding repetitive visual templates.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Building a landing page with a distinct visual direction
• Creating a dark-themed analytics dashboard
• Implementing responsive web components

Measure and improve animation performance on frontend pages. Identify offscreen activity, pause CSS and canvas or WebGL loops, audit resource cleanup, and compare runtime observations before and after changes to investigate scrolling issues and long-session slowdowns.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Pause animations outside the viewport
• Investigate jerky scrolling
• Audit cleanup after page navigation

[omh] Oversized or tangled UI component: behavior-preserving refactor of UI code - preview the full change plan first, apply as a second explicit step, and work impact-ordered from state architecture down to naming polish. Use when the user says: frontend-refactor, front-refactor, frontend refactor, refactor this component, refactor the component, refactor my component, component refactor, react refactor.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Refine an already working product frontend in a dedicated finishing pass, preserving its identity while improving hierarchy, components, copy and responsive behavior. Use after the core flow works or when the user asks for frontend polish; not for product ideation or a new visual direction.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Document frontend data needs for backend developers. Use when frontend needs to communicate API requirements to backend, or user says 'backend requirements', 'what data do I need', 'API requirements', or is describing data needs for a UI.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Frontend development guidelines for React/TypeScript applications. Modern patterns including Suspense, lazy loading, useSuspenseQuery, file organization with features directory, MUI v7 styling, TanStack Router, performance optimization, and TypeScript best practices. Use when creating components, pages, features, fetching data, styling, routing, or working with frontend code.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Expert in secure frontend coding practices specializing in XSS prevention, output sanitization, and client-side security patterns. Use PROACTIVELY for frontend security implementations or client-side security code reviews.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Build React components, implement responsive layouts, and handle client-side state management. Masters React 19, Next.js 15, and modern frontend architecture. Optimizes performance and ensures accessibility. Use PROACTIVELY when creating UI components or fixing frontend issues.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Context-led frontend design: art direction derived from product, audience, brand and the existing system, not generic defaults. Named mood variants listed inside. Triggers: frontend, UI, CSS, styling, visual, theme, component, layout, responsive, accessibility, animation.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Use when testing, debugging, or making targeted improvements to rendered frontend apps through the Frontend Design Skills or web dev plugin: local dev servers, UI regressions, interaction bugs, console errors, responsive layout, and visual QA. Check whether the Browser plugin is available and use it first when it is; otherwise use regular Playwright with the recorded reason.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Frontend development for React, Next.js, TypeScript, and Tailwind CSS. Use when building React components, optimizing Next.js performance, analyzing bundle sizes, scaffolding projects, implementing accessibility, or reviewing frontend code.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.