web-application-developer

Name: web-application-developer
Author: rade-nugroho

github.com/rade-nugrohoDevelopment1237 installsUpdated 23w ago

About web-application-developer

A web application development skill for building browser-based apps and handling their APIs, authentication, security, and release checks. It covers SSR, SPA, and hybrid architectures, but not native mobile or desktop clients.

Key features

01SSR, SPA, and hybrid app architecture
02HTTP API integration and error handling
03Browser authentication and session patterns
04Forms, uploads, and input validation
05Web security checks for CORS, CSRF, and CSP
06Unit, integration, and end-to-end testing

Use cases

01Planning routes and rendering for a web app
02Connecting a browser UI to HTTP APIs
03Implementing login, sessions, and token handling
04Checking web security and critical user journeys

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/rade-nugroho/agentic-enteprises-skill --skill web-application-developer

After installing, type/web-application-developerin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/

api_integration.md

auth_sessions.md

web_app_architecture.md

web_security.md

Details

From the project README

Web Application Developer

When to Use

Build or extend a browser-based web application (not native mobile)
Implement auth flows, sessions, or token handling in a web context
Connect UI to HTTP APIs with correct error and loading handling
Address CORS, cookies, CSRF, or caching behavior between browser and server
Ship SSR, SPA, or hybrid (e.g., Next.js) routing and data loading

When NOT to Use

Native iOS/Android or desktop-only clients → stack-specific mobile/desktop guidance
Pure infrastructure or pipelines → devops, infrastructure-engineer
UX discovery and wireframes only → product-designer
Org-wide security program → cybersecurity
Senior cross-service RFCs → senior-software-engineer

Related skills

Need	Skill
Full-stack IC features (general)	`fullstack-software-engineer`
Senior full-stack delivery	`senior-fullstack-developer`
Front-end architecture only	`senior-frontend-software-engineer`
UI screens from design specs	`ui-software-engineer`
UX specs and flows	`product-designer`
Pipeline and hosting	`devops`
Pipeline security scans	`devsecops`

Core Workflows

1. Web app structure

Choose rendering model explicitly:

Model	When
SSR / hybrid	SEO, fast first paint, authenticated dashboards
SPA	Heavy client interactivity, app behind login
Static + API	Marketing site + separate app subdomain

Document: routes, auth gates, global layout, error boundaries.

See references/web_app_architecture.md for routing and env patterns.

2. HTTP API integration

Use typed client or OpenAPI-generated types
Handle 401 → refresh or redirect to login
Timeouts and retry only for idempotent GETs
Paginate list endpoints; avoid loading unbounded data in browser

See references/api_integration.md for client patterns.

3. Auth in the browser

Prefer HttpOnly, Secure, SameSite cookies for session cookies
Or short-lived access token in memory + refresh rotation
Never store secrets in localStorage for high-risk apps
Protect state-changing routes with CSRF tokens when using cookies

See references/auth_sessions.md for flow diagrams.

4. Forms and uploads

Client validation for UX; server validation required
multipart/form-data for files; progress and size limits
Sanitize filenames; scan server-side if policy requires

5. Web security baseline

Escape output; avoid dangerouslySetInnerHTML without sanitizer
Set CSP headers; restrict script sources
CORS allowlist explicit origins—not * with credentials
Security headers: HSTS, X-Frame-Options or frame-ancestors

See references/web_security.md for checklist.

6. Test and release

Unit: validators, hooks, API mappers
Integration: API routes with test DB
E2E: login and one critical journey (Playwright/Cypress)
Smoke test after deploy on staging URL

See references/web_app_architecture.md for env and config.

When to load references

Architecture and env → references/web_app_architecture.md
API clients → references/api_integration.md
Login and sessions → references/auth_sessions.md
CSRF, CSP, CORS → references/web_security.md

Comments

Markdown supported

Details

Author: rade-nugroho
Repository: rade-nugroho/agentic-enteprises-skill
Category: Development
Installs: 37
GitHub stars: 12

Report

More skills

All skills

remotion-render

github.com/inference-sh

1.6M

Render videos from React/Remotion component code via inference.sh. Pass TSX code, get MP4. Supports all Remotion APIs: useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Sequence. Configurable resolution, FPS, duration, codec. Use for: programmatic video generation, animated graphics, motion design, data-driven videos, React animations to video. Triggers: remotion, render video from code, tsx to video, react video, programmatic video, remotion render, code to video, animated video, motion graphics code, react animation video

improve-codebase-architecture

github.com/mattpocock

1.2M

Scan a codebase for architecture improvement opportunities, present them as a visual HTML report, then dive deep into whichever one you pick.

design-mobile-apps

github.com/designed-by-ai

1.1M

Design mobile app screens with Sleek, edit Sleek projects, and implement their designs in React Native or HTML

vercel-react-best-practices

github.com/vercel-labs

848.6k

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.