skills/landing_page-plugs/SKILL.md
Custom Plug middleware patterns in landing_page_backend — authentication (JWT/Passport), authorization, permission checking, and rate limiting.
npx skillsauth add vuluu2k/skills landing_page-plugsInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
Custom Plug middleware architecture for authentication, authorization, and permission control.
| Topic | Description | Reference | |-------|-------------|-----------| | Authentication Plugs | JWT validation, Passport auth, Account lookup | core-auth | | Permission Plugs | Role-based access control, page/org/team checks | core-permissions |
# Router pipeline — plugs chạy tuần tự
pipeline :passport do
plug LandingPageWeb.Plug.PassportPlug # 1. Validate token → assigns :token_claims
end
pipeline :account do
plug LandingPageWeb.Plug.AccountPlug # 2. Lookup account → assigns :account
end
pipeline :organization do
plug LandingPageWeb.Plug.OrganizationPlug # 3. Lookup org → assigns :organization
end
# Scope sử dụng pipelines
scope "/api/v1", LandingPageWeb.V1 do
pipe_through [:api, :passport, :account, :organization]
resources "/pages", PageController
end
defmodule LandingPageWeb.Plug.MyCustomPlug do
import Plug.Conn
def init(opts), do: opts
def call(conn, _opts) do
# 1. Lấy data từ conn (headers, assigns, params)
account = conn.assigns.account
# 2. Validate/process
case validate(account) do
:ok ->
# 3a. Success → assign data và pass conn tiếp
conn |> assign(:validated, true)
:error ->
# 3b. Fail → halt pipeline
conn |> send_resp(403, "Forbidden") |> halt()
end
end
end
# Trong controller — chỉ áp dụng cho specific actions
plug LandingPageWeb.Plug.PermissionCheck,
[role: :owner, type: :page]
when action in [:delete]
plug LandingPageWeb.Plug.PermissionCheck,
[role: :manager, type: :page]
when action in [:page_detail, :update_right]
plug LandingPageWeb.Plug.PermissionCheck,
[role: :organization_admin, type: :organization]
when action in [:bulk_update_rights]
development
Vue 3 Composition API — <script setup>, reactivity (shallowRef/ref), props without destructure, computed, watch, provide/inject, and composables. Use when the project uses modern Vue 3 Composition API style.
development
Vue 3 Options API — data, props, computed, methods, watch, emits, provide/inject, lifecycle hooks, and mixins. Use when the project uses Options API style (Vue 2 legacy or explicit Vue 3 Options API preference).
tools
Best practices for mixing Ant Design Vue components with Tailwind CSS utility classes. Use this skill to keep styling consistent without custom CSS files.
development
Pinia state management for Vue 3 using Composition API (Setup Stores) — TypeScript-first, storeToRefs for reactivity, focused stores, and API calls in composables. Use when the project uses Vue 3 Composition API / <script setup>.